
Speed up and simplify 
your development 


Build a beautiful and bespoke 
look for your web project 


Tutorial files available at: 

webdesignermag.co.uk/tutorial-files 




• Make pictures 

from code 
with PHP 

• Add swipe 
gestures with 
Dreamweaver 

• Create a star¬ 
rating system 
with jQuery 
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Synology 


Also available: 


% 

DiskStation DS212j NAS Server 

A Secure Personal Cloud for Your Mac’s Data 


Synology DS212j is an affordable storage solufion for your Mac 
environment, which maximises your iOS devices with five free 
apps, and offers many features. 

■ Native Mac support with easy setup for Mac and AFP protocol 

■ Backup data using Time Machine 

■ Stream music remotely on Mac or iOS devices with iTunes and AirPlay support 

■ View photos, videos, and files on any iOS devices 

■ Extended AirPrint Support 

■ Live view IP cameras directly on your iOS devices 


DS411slim 


For more information, please visit 
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Synology may make changes to specification and product descriptions at anytime without notice. Copyright © 2012 Synology Inc. All right reserved. Synology Is the registered trademark of Synology Inc. Other 
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Highlight 



## Our first step 
was to stabilise the 
current website long 
enough for us to 
create a new one §• 

Station Four’s Chris Olberding 
talks about the extra 
challenges some projects 
inevitably involve 

Page 28 


Perfect page chemistry - the science bit 


elcome to the latest issue of Web 
Designer magazine. This issue we're 
trying to unravel the science of 
beautiful user interface design. jQuery 
was always going to be our number 
one choice thanks to the way it 
simplifies the coding of stunning and 
dynamic page elements allowing web 
designers to spend more time doing what they do best 
- beautiful design. In our feature starting on page 40, 
Jeff Way and Steve Jenkins show us how elements like 
accordions, tabs and date pickers can easily be 
implemented without having to compromise on any of 
your design goals. 


Continuing the theme, we've also gone all out to 
show you how you can inject interest and interaction 
into your image galleries using a star rating system over 
on page 64 and we take the science of design to the 
nth degree on page 48 where we construct imagery 
from pure code with PHP. 

Elsewhere this issue we spend some time with 
underscores, a starter theme created by Automattic, the 
makers of WordPress. underscores is a great starting 
point for building a bespoke look for your blog and we 
hope the tutorial starting on page 58 whets your 
appetite for a special look at bespoke theme creation 
using WordPress next issue. 

Russell Barnes 


if jQuery simplifies 
the coding of stunning 
and dynamic page 
elements ill 


Follow us on Twitter for all the news & conversation © @WebDesignerMag 
Visit our blog for opinion, freebies & more© www.webdesignermag.co.uk 



Excitographic 

Plotting the features that got us 
in a frenzy over the month... 

A Steve Jenkins, Features Editor 
A Russell Barnes, Editor 
A Daniel Duke, Designer 
A Ben Martin. Sub Editor 


Turn over to the contents to 
discover what’s going to get you 
excited this issue... 
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This issue’s panel of experts 


Welcome to that 
bit of the mag 
where we learn 
more about the 
featured writers 
and contributors. 


fi Find out how to 
create beautiful 
jQuery-powered 
elements «i 



Jeffrey is a developer, evangelist, instructor and author who works for 
Envato (envato.com). This issue he tackles the web designer's JavaScript 
library of choice, jQuery. Find out how to create beautiful jQuery-powered 
elements and build a plug-in. Page 40 



Mark Shufflebottom 



Mark Shufflebottom is the 
programme leader of BA 
(Hons) Digital Media Design 
at Bournemouth University 
and an Adobe Education 
Leader. In this issue he 
demonstrates how to use 
swipe gestures to move 
between content. Page 52 



Ben Frain 



Ben Frain is a freelance 
front-end developer and 
technology writer. He is also 
the author of Responsive 
web design with HTML5 & 
CSS3. This issue he explains 
how to build a bespoke 
WordPress theme with 
Underscores. Page 58 



Sam Hampton-Smith 



A keen supporter of web 
standards. Sam loves 
getting the most out of 
HTML and CSS. This issue 
he reveals how to create a 
star rating system with 
jQuery and how to apply 
the rating system to an 
image gallery. Page 64 


Pete Simmons 

Pete is a Digital Marketing 
Manager for Lionhead 
Studios in Guildford. Pete 
also specialises in front-end 
development. PHP and 
social APIs. This month he 
tackles the art of creating 
and manipulating images 
using only PHP. Page 48 


Shane Conder 

Shane is a newcomer to the 
Web Designer stable, but he 
has long been an authority 
on Android development 
and has some extensive 
experience in the mobile 
arena. This issue he looks at 
the Google Maps API for 
mobile devices. Page 84 


Kieron Howard 

Kieron is a web developer 
that resides in the Imagine 
Publishing Interactive 
department and loves to 
work with the latest 
technologies. This issue we 
find him revealing the 
delights of deploying a live 
site with Git. Page 92 





Louis Lazaris 



Louis is an author and 
front-end developer living in 
Toronto. Canada. He writes 
regularly for his site www. 
impressivewebs.com. This 
issue he tackles CSS pseudo 
-elements and shows how to 
extend tags with -.before and 
:after elements. Page 70 
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Matt Gifford 



Matt Gifford is a lead RIA 
consultant developer and 
author who specialises in 
ColdFusion. Flash and AIR 
development. This issue he 
tells us how to build a simple 
Java webapp powered by 
Groovy and the Grails MVC 
framework. Page 88 
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web skills? 
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We’re always looking for the j 
hottest web-design talent. Email 
webdesigner@imagine-publishing.co.uk 
with examples of your creative work 
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Vbu. The wb b. Connected. 


High performance hardware, 
reliable infrastructure and 


expert support, what more 


could you want? 

How about 15% commission? 

At Webfusion we don’t just otter reliable and robust hosting products, 
we also give you the opportunity to earn commission by referring our 
products and services to your colleagues or business associates by 
joining our Partner Programme. 

Earn 15% commission 
V No limit to what you can earn 

Not points based, earn money for your referrals 
Increase your revenue with little effort 



Here is an example of what you could earn... 

Product Quantity Price 

Level 4 dedicated server (managed) 2 £7559.76pa 




Celebrating 15 years of hosting excellence 


Level 2 dedicated server (self-managed) 1 

Virtual Private Server developer 1 


Total commission £1495.19 


Call 0808 231 4381 now to get started! Or visit www.webfusion.co.uk/partner 

*Quoted prices are subject to change and are exclusive of VAT. Terms and conditions apply. 






Cutting-edge features, techniques and inspiration for web creatives 


Chat with the team and other readers and discuss the latest tech, trends and techniques. Here’s how to stay in touch... 

O webdesigner@imagine-publishing.co.uk O @WebDesignerMag (3) www.webdesignermag.co.uk 

Insider 


22 Lightbox 

Three sites that make the web that bit better 

28 Design diary: Station Four 

This month’s Design Diary sees us following 
the development of chocolatier, Peterbrooke 

32 Pro file: Basilico Interactive 

Basilico share their passion for digital and 
reveal a little bit about what makes them tick 

38 Blog beautiful 

Six engaging blogs by creative creatives 

40 Cover: jQuery - the science of 
beautiful design 

Attain perfect page chemistry with this 
collection of essential Ul techniques 

80 Design cloud 

24 sites demonstrating elegant eCommerce 

96 Portfolio 

Three more rising stars in the web world 

100 Trend map 

We investigate the city of parks, Cardiff 

114 Style relic: National Geographic 

A brief history of Nat Geo since 1996 


<lieacter> 


Discussing the hottest topics 
from the web-design world 

8 Twitter updates cause a stir 

The world’s favourite microblogging platform 
adds updates that prompt contrasting opinion 

10 Is it time to go freelance? 

We investigate whether now might be the 
perfect time to make the move 

14 Crowdsource 

We respond to your latest letters and tweets 

16 Comment: Ashraf AlKarmi 

Brightcove’s AlKarmi wonders what role the 
web designer plays in today’s digital economy 

18 Comment: Andy Chubb 

How can we ensure the mobile web doesn’t 
pass your brand by? Cube 3 dev Chubb reveals all 



Pro file: Basilico Interactive Lightbox: DESK 

Behind the scenes with this award-winning Italian agency Take an intimate look at creative work spaces 
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Feature 

Mobile maps for mobile apps 

Shane Conder gives us a great introduction to using 
the Google Maps API for mobile - arguably one of the 
most important features of modem mobile devices 


88 


Build a web app with 
Groovy & Grails 

Make a simple Java web application powered by 
Groovy and the Grails Model View Controller 


92 


Deploy a site with Git 

Achieve easy branching and rollbacks using the Git 
version control system 


Single-page navigation 
with HTML5andJS 

Create a Flash-like single-page 
navigation experience to build 
a fast loading site with polished 
transitions between content 


92 > a n m * 

Add interest to a gallery Take control of your code 

Build a star rating system with jQuery Master the Git version control system 


shoplochst 


Sell anything 
from anywhere, 
in minutes. 


Recreating the 
web’s hottest styles 

Create a vibrant 
eCommerce site 

Mark Shufflebottom shows us 
how www.shoplocket.com 
has made eCommerce easy 
and beautiful by embedding 
an iframe shop into the site 


On the free Cl> I <tutorials> 


112 Discover what your latest disc has to offer 

A comprehensive collection 
of free designer resources! 

• 150+ minutes of pro video tutorials 

• Responsive WordPress theme 

• 50 transparent lens flares 

• 18 Electrosketch lens flares 


Web gurus take you step-by-step 
through professional techniques 

PHP: Create images with code 

How to create and manipulate images purely in PHP 

Make swipe gesture content 

Design and implement swipe gestures in your website 
to move between content in style 

Create a WordPress theme with 
underscores 

From WordPress maker, Automatic, comes underscores, 
a great starting point for making a bespoke theme 


48 


52 


58 


1>) Menu 


64 


70 Extend tags with CSS pseudo¬ 


elements 

Create individual styles within selected HTML tags 


Dynamic content is king Make your site your own 

Get content moving with swipe gestures Create a bespoke WordPress theme 


Dedicated 13-page section offering 
features and tutorials for coders 


Build a star rating gallery system 
with jQuery 

Make your image galleries more dynamic and interesting 
with a little help from jQuery 
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Discussing the hottest topics in the web design world 

If you have a creative project, new web product or great designer story, contact the editorial desk 

O webdesigner@imagine-publishing.co.uk O @WebDesignerMag 


Twitter 

updates 

cause a stir 

The web’s favourite microblogging 
platform adds upgrades and updates 
across the board. Here Web Designer 
takes a look at what’s on offer and 
reveals some contrasting opinion 



E verybody loves Twitter, but 
there’s always room for 
improvement, and the latest 
series of updates and upgrades see 
the microblogging platform embrace a 
more meaningful experience. The 
problem is. this is not always strictly true. 
There is the simple adage that if it ain’t 
broke don't fix it. However, if this same 
logic was applied to technology across 
the board everyone would still be using 
Windows XP on a desktop. By its very 
nature, technology moves forward, it 
doesn’t matter how great a service is, it 
will eventually be superseded by an 
updated version of itself or a competitor 
will take over at the top. 

While it's a necessity to move forward, 
its almost guaranteed that the reaction 
will provoke different responses from 
the current userbase. Some will love the 
new features, some will hate them, some 
will grow to love them and others will 
simple accept that for what they are. 


So, before we dive in and analyse the 
new Twitter additions, what exactly have 
the boffins at the Twitter labs been up 
to? There have been a number of design 
updates and mobile upgrades. iPad 
users now have a new app to play with, 
while iPhone and Android users have a 
few new additions to try. Beyond the 
mobile arena, Twitter has tweaked its 
profile pages online. 

The big news for the Twitter website 
is the introduction of a new header 
image. It instantly adds more credibility 
and panache to any Twitter account. For 
such a simple addition it is undoubtedly 
going to be embraced by designers as 
it's the perfect platform for creatives to 
display their talents. There is no doubt 
that there will be a whole host of 
beautifully designed headers occupying 
the profiles of Twitter. From the obvious, 
to the clever, to the unique, we at Web 
Designer cannot wait to see how the 
new feature evolves. 


Sitting alongside the header image in 
Settings, Twitter has also tweaked its 
widgets. A new tabbed interface allows 
for pretty much the same widget 
creation, but they make the process far 
cleaner and quicker. The end results 
have also had a design tweak and the 
code now takes on a different form, 
hiding the actual code. 

Moving away from the website there 
are updates for iOS and Android, with 
the iPad iteration getting the most 
attention. Check the iPad boxout on 
page 9 to read more details and opinion. 

With millions of users tweeting on a 
daily basis, the company was always 
going to struggle to please everyone. 
However, while we at Web Designer are 
not completely overawed by all the new 
additions, we know they are heading in 
the right direction. And, as with 
Facebook updates, a few months down 
the line no-one but the most die-hard of 
fans is going to remember the old. 



r 



Above: some of our favourite Twitter headers. We 
especially love the effort from Damien Basile 
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The new Twitter 
iPad app 

Apple’s tablet gets a new, and not always 
welcomed, version of the Twitter app 


The iPad app is another member of 
the Twitter family that has been 
updated. Upon announcing the new 
app, Twitter chief executive Dick 
Costolo said: "We’ve rebuilt the app 
from the ground up to make it fast, 
beautiful and easy to use. Twitter for 
iPad brings you closer to what's 
happening all over the world, and 
makes it easy to keep up with the news 
you need to read, the photos you want 
to see and the people you follow." 

However, its would seem that its not 
to everyone’s taste. For starters take a 
look at Pete Simmons’ comment on 
the right, and he’s not the only one. 
Web Designer follower Philip Martinez 
tweeted ‘New @twitter #iPad app is 
nice but I did like having the side by 
side pages from the previous version’. 

The reviews on the app store are far 
more scathing, with none of the 
reviewers giving it more than one star. 
Bertie the Bee said 'Just so confusing 


and can’t see my other accounts. 
Pointless. Deleted. Whoever sanctioned 
this should be ashamed’. Oliver Edis 
was just as disapproving saying This 
app was fine as it was, now they’ve 
gone and ruined it will [sic] silly buttons 
they don’t need! This was a completely 
pointless update!’ 

This hardly a glowing report for the 
new app. but we at Web Designer do 
not have quite such strong opinions. 
We think the new iPad app is now 
much more reminiscent of the iPhone 
and the desktop apps, giving it a more 
complete brand outlook. And, lets be 
honest, most of the detractors will have 
to work with the new update, and will 
have forgotten after a week or two 
about the old version and grown to 
love the new one. 

If you haven’t already got the new 
Twitter iPad app, you get it from 
twitter.com/download/ipad and try 
out it for yourself. 



There is no doubt that the 
Twitter redesign is all about tying 
everything closer together. The iOS apps 
now join twitter.com in dis p l aying content in si de the stream. 


COMMENT 

Thord Daniel Hedengren 

WordPress expert 


Add the redesigned profile pages online and the 
corresponding changes for header images in particular 

within the apps. and the design package wraps up nicely 

While I do like how more and more content is displayed 

within the stream. I can’t sav that the redesigned apps are a 

vast improvement. The one thing to take awav from this 

redesign is that Twitter is set on delivering a more-or-less 

identical experience to its users. There are indeed some good 

things here; yo u ca n make p retty cool stuff with t he h e ader 

image, a background, and a bit of imagination (like 
@rvanseacrest). and that makes for a more personal touch. 
Add this to the fact that Twitter is limiting third-partv apps. 

and I think we can mark this as the first visual step towards a 
closed media platform, rather than an open 
channel for communi cation and in novatio n. 
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COMMENT 

Pete Simmons 

Director at Terror Designs LTD 

Twitter rolled out a new design 

of bo th t heir website and iPad app, 
both of w hich have had a massive 
overhaul. The biggest thing to come out of the redesign is header 

image; users are now able to set a custom header image as well 

as their profile picture, akin to Facebook’s cover images. 

The iOS app sees a new layout and the removal of third-partv 

image uploads such as vfrog and TwitPic. The company’s focus 

seems to be around bringing consumers back into using official 

Twitter apps, especially wit h the rece nt chang es to the wav 

develo pers can interact with the Twitter API and the h eavy 

limitations that have been placed on them. 

Other changes to the iPad app include the removal of the tab 

design in f avour of a tim eline, an d f orcing users t o ‘open tweets 

before viewing content such as images or links. This seems like a 

step backwards from a user experience perspective, and makes 
things feel slower. From a company whose whole ethos is based 
on quick, snappy user updates, putting a roadblock 

like this in the wav could come back to bite them. 
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New header image 

The new header image has been the big change 
in Twitter profiles, but how do you get yours? 



V Ryan Seacrest'© 

ORyanSeecre&Hjj^H 

The day will happen whether or not you get up. - John C 
Los Angeles, CA • http://ryanseacrest.com 


6.924 


561 


7,874,222 

FOLLOWERS 


^ Follow 




There is nothing complicated or 
confusing here, but if you haven’t tried the 
new header image feature, now is the 
time to give it a go. This new piece of 
profile design presents itself at the top of 
a profile page, and is a great opportunity 
to indulge in a little bit of shameless 
self-promotion. Choosing the right image 
can potentially grab hundreds - or even 
thousands - of new followers. A 
beautifully-crafted header will draw 
designers to your profile, with tweets just 
a secondary hit. As always there are a few 


guidelines that need to be adhered to. 
These will ensure that any header gets 
closer to its full potential. Twitter’s 
recommended dimensions are 1200 x 
600px with a maximum file size of 5MB 
- which is more than enough to create a 
masterpiece. However, for a few tips on 
designing the perfect header, a visit to 
Design Shack (bit.ly/RBelvA) has to be on 
the cards. To start the process head to 
Settings>Design. Sitting under Customize 
your own is the Change header button, 
click, select image and Save changes. 


header 
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Discussing the hottest topics in the web design world 
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...Job Done! 


Is it time to take on the 
freelance challenge? 

Ready to take the plunge and strike out on your own? Now may be a great 
time to take the step into the world of freelance 


T he lure of going freelance can be a 
very tempting proposition. No 

travelling to the office, choosing your own 
hours, and an office designed specifically 
for you. On the flipside, there is the lack of 
job security, the possibility of even longer 
hours and a host of admin tasks that you 
didn’t even know existed. 

Taking to the decision to switch from 
the comfort zone into the unknown is a big 
step, but more and more of the design 
fraternity are taking the plunge. Now may 
be deemed the time to make the move, 
especially as more and more businesses 
are hiring freelancers, in particular small 
businesses. The prospect of hiring a 
freelancer for a short project boasts a host 
of advantages for a small business. 
According to figures provided by 


peopleperhour.com the increase in the 
number of people who have registered as 
freelancers in the past year has gone up 
by 52%. The number of people who have 
registered as freelance web designers in 
the past year has risen by just over 42%. 
And, as an added bonus, the average rate 
for a web designer is £32.64. It seems that 
logo and web designers, illustrators and 
artists do particularly well due to the 
specialist and stylised nature of their work. 

The facts and figures certainly look 
good, but as more and more designers 
enter the marketplace, the stiffer the 
competition becomes. 

There are a host of sites that offer 
advice and the opportunity to get work. 
Freelance Advisor (www.freelanceadvisor. 
co.uk) offers a comprehensive guide to 


becoming a freelancer, with stories and 
tips from those that have taken the plunge. 
Some simple snippets of advice include 
being motivated, without this you are 
almost destined to fail. Make sure you have 
a skill or skills that are demand. Niche skills 
greatly narrow down the field of 
opportunity. Be organised and efficient; 
there will be a million jobs that needed 
doing yesterday. Finally, make sure that 
you can afford it; projects wont suddenly 
drop into your lap, do some careful 
budgeting. See boxout for more tips. 

If the decision to go freelance is a starter 
be sure to check out the following 
websites. Peopleperhour.com and Elance 
(www.elance.com) bring together 
freelancers and business. Get online and 
start selling yourself now. 


Tips for freelancers 

• Publish a portfolio 

Display the best examples from your 
portfolio for customers to see 

• Make your first pieces count 

Think carefully about the work you 
present and in which order 

• Check out the competition 

Look at online at other portfolios 

• Network 

Pick up the phone; go to networking 
events and meet clients in the flesh 

• Don’t spam 

Tailor an email to suit, and follow up 
soon after with a friendly phone call 

• Start small 

A good project can lead to referrals 
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news 



With businesses looking to 
streamline costs while improving 
efficiency and productivity, specialist 
roles, such as web design, are increasingly being outsourced. 


COMMENT 

Xenios Thrasy voulou 

CEO of PeoplePerHour.com 


Rather than going to larger firms with sizeable overheads, 
which will inevitably be passed onto the client in their 
pricing, we are seeing more businesses tapping into a remote 

marketplace of highly skilled freelancers to do the work. 

Logo and web designers do particularly well on 
PeoplePerHour, due to the specialist nature of their work. We 

have seen the number of jobs commissioned through the 

marketplace increase bv 58% in the last year, taking the 
number of roles available through the site to well over 8.000. 

In a competitive market, the key is visibility This is where 
PeoplePerHour can help bv showcasing work, raising vour 
profile and ultimately placing web designers 
before a pool of hungry-for-talent businesses. 


Get great digital mags 

Visit the Imagine Publishing online superstore, 
greatdigitalmags.com, to get a digital copy of your 
favourite publication 

Web Designer and its sister magazines have teamed up with Zinio, the leading 
digital publisher, to offer even more options for getting your favourite magazines 
delivered in the format you want. 

The Imagine/Zinio partnership means that 
Web Designer and the rest of Imagine's print 
portfolio is now available on PC, Mac, Linux, 
iPad, iPhone, Android, Blackberry and Web OS. 

So, wherever you are in the world, a copy of 
your favourite publication will always be at 
your fingertips. 

Zinio (gb.zinio.com/apps/index.jsp) 

provides the apps you need to get the best 
on-screen reading experience, while Web 
Designer provides the unmissable content. 



The Creative 
Cloud dilemma 

Is Adobe’s Creative Cloud pricing policy going 
to attract or repel users? 


A dobe recently reviewed Creative Cloud’s current status and has made some 
amendments to its various plans. However, the pricing plans see a new strategy, 
which involves users adopting a single app strategy or a complete package strategy. 
This is the first issue that bothers us. The single app plan gives users full access to a 
single app. This is the cheapest option at £17 a month, but access to one app is 
limiting. Web designers are typically going to need at least two apps - Photoshop and 
Dreamweaver, would be one choice. But, this immediately doubles the monthly cost 
to £35. There is the option to go all out and take on the Complete package for nearly 
£47 a month. This may be a price point that sits well with business users but 
individuals may think twice. And, there is the issue of paying for a host of packages 
that will never be used. Admittedly, the Complete package is only £500 a year, cheap 
when compared with the boxed product, but then Adobe are not paying for any 
packaging or distribution. An interim option, say two or three packages at £20 a 
month is a far more attractive proposition. 

Another mystery is why is the introductory offer is only available for existing 
Creative Cloud customers. Surely, if Adobe is looking to attract new customers they 
should be making the offer available to everyone - or, does Adobe think that they 
have a monopoly, and if users want to use their product they will have to pay 
whatever Adobe choose? 

There is no doubt for us at Web Designer that Creative Cloud is the type of 
forward-thinking that Adobe needs to adopt. However, we are not too sure about 
their current pricing strategy. It could be time for another rethink. 



<news cloud 


Google Play store hits 25 billion 
downloads. Watch out Apple 


Bite-sized coverage of the month’s trending topics 

Adobe teams up with FWA kT 

The software vendor has teamed up with the leading 
showcase site The FWA to present the Cutting Edge 
award. Once a week Adobe presents an award to the 
project that best highlights the newest capabilities of 
the modern web. The sites chosen for the award will 
be using the latest browser features and technologies. 

Check them out at www.thefwa.com. 


Nook 


Google ^ 
Adobe TWitter 

Word Press Myspace 


China is the most 
active country and 
access is blocked 


c 


Crumbs is a new open-source holding page that 
gently reminds clients to pay their invoices 


The social network is to make a 
comeback. Join the revolution 




Nook in time for Xmas 

The quest for top spot in the 
tablet market is set to intensify as 
Barnes and Noble is introducing 
its two full tablets in the UK. The 
Nook HD is a 7", 8GB, £159 device 
that is in direct competition with 
the Kindle Fire HD and Nexus 7. A 
16GB version is £189. The Nook 
HD+ is a 16GB, 9.5-inch screen 
being sold at £229. Both are 
available in November. 
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Business 

Technology that grows with you 



Whether you are a startup or an established business, 
choosing an experienced and trusted technology provider 
that can meet your business requirements is vital. 

With over 13 years’ experience, we are dedicated to 
supporting businesses at all stages of growth. 

From inception to maturity our team of experts will 
help you find the right solution for your business. 

For help and advice call us now on 

08006520444 



Technology on demand 

today, tomorrow and the future 


WEB HOSTING ■ DOMAINS ■ EMAIL ■ DEDICATED SERVERS ■ VIRTUAL SERVERS ■ RESELLER HOSTING 


fcstnost* fasthosts.co.uk 

Making business work better online or call 0800 6520 444 
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Your emails, tweets, forum comments. The social network, but in print 

This month we discuss getting caught out by copyright and building a site from this very magazine 


subject Know your image rights 

From ‘Big’ Mark 



Having been forced to pay a supposed ‘damages’ claim for £900 by 
the ####s at Getty Images, for using an image that was part of a 
template I had used in total innocence - ie, being a victim of the 
extortion letter policy (www.extortionletterinfo.com) - I have a very 
important question that would be relevant to everyone using the 
Web Designer resource disc content. Is everything on the CD 
included with the magazine ‘safe’ in the respect that it’s totally fine to 
use the WordPress templates and the like, without fear of Getty or 
iStock etc coming along at a later date and trying to sue everyone for 
copyright issue related to images? It’s one of those things that until it 
happens to you, everyone ignores. Thank you for any advice. 

Web Designer takes the responsibility of image rights very 
seriously indeed, and endeavours to ensure that any images on the 


resource disc are freely available to use. However, when 
using assets such as WordPress themes, it is always 
worth reading the small print. Themes come with a 
readme file which stipulates usage of the theme, so 
ensure you read carefully before using them in a public 
domain. Typically, images within themes and other 
assets are included as a guide. They are not there to 
provide the base for a theme/page/post etc. Plus, using 
the same image that everyone else has access to can 
negate the originality and uniqueness of a design. To be 
on the safe side use your own images or seek permission 
from the owner. Check out Flickr’s Creative Commons 
license (www.flickr.com/creativecommons) to see what 
images you can use from its site. 


WebKit 

Discover the kit 
needed to help 
create inspirational 
and interactive web 
pages 



Rich Snippets 

developers.google.com/ 

webmasters/richsnippets 



Big Cartel 

bigcartel.com 



Price Table 

wordpress.org/extend/ 

plugins/pricetable 


subject Subscriptions in 
the USA 

From Joel Myers 

Do you offer subscriptions to USA 
addresses? I am a web design 
teacher in a tech school (grades 
10-12) and like to have a variety of 
related magazines for the 
classroom. I came across Web 
Designer and was interested in it. 
as well as some of the 
photography magazines. So do 
you support subscribers in the US, 
and if so is there an additional 
shipping/handling fee added to 
the subscription. 

Web Designer certainly does 
offer subscriptions to the USA. 
We are currently running a 
special promotion (see page 
99). USA readers who purchase 
a subscription are effectively 
getting five issues for free 


(when compared with the shop 
price of $14.99). Head to 
imagine.subscribeonline. 
co.uk, select the Web Designer 
cover, and choose the 
appropriate subscription. 

subject I’m not a web 
designer but... 

From Gavin McKay 


Hi. thanks for producing such an 
informative magazine with 
excellent tutorials and examples. 
I’m not a web designer by trade, 
but started reading your 
magazine in 2011 to try and put a 
website together for my wife’s 
business: www.panaceabeauty 
salon.co.uk. 

My first ventures were in Flash, 
and after fiddling with HTML text 
I managed to get good rankings 
on Google etc. However, my 
latest reincarnation is purely 
HTML and jQuery/JavaScript and 


to be honest (as I said I’m not a 
web designer!) I’m very pleased. 

The site is not the cleanest 
code and certainly won’t win any 
design awards, but it has 
increased the number of clients 
visiting the salon and gives an 
instant way to update 
information. I’m sure you are 
inundated with requests to look 
at websites, but could you take a 
look at my site (particularly the 
Treatments and Contact pages) 
and let me know what you think? 

Its always good to see that Web 
Designer is helping readers 
realise their potential and 
putting their skills into practice. 
We strive to make sure that 
newcomers and experienced 
designers will take something 
away with every issue of the 
magazine. We did have a quick 
look at the site and only have 
one criticism. There is one 


II The WD website does include a tutorial files 
section where users can download assets if 
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obvious issue - no link back to the home 
page! Sort this and you’ll have yourself a 
great little site. 

subject Digital back issues 

From Mark 


Please can you advise me if you plan to 
offer a back issues payment plan for your 
iPad version of the magazine? I would like 
to purchase a 12-month subscription to 
current and future issues, with also the 
option to purchase either all or the last 12 
releases at a discounted price. 

There are currently no plans to offer a 
back issue payment plan for the iPad 
version of the magazine. However, it is 
quick and easy to buy single back issues 
at the same price via the app. With the 
app installed, users can choose which 
issue to view, and if they haven’t already 
purchased an issue there is the option to 
Buy Now. All the user needs is to wait for 
the magazine issue to download. 


subject Disc for digital 
subscnbers 

From Shane 


I usually buy Web designer in store and 
get a resource disc with each edition. 

I recently bought an iPad, so I have been 
getting the digital edition. 

Is there a way for ‘online' customers to 
still receive the free content that would 
have been on a CD? Like a URL with the 
online edition that links to a page that 
verifies I have bought the online edition, 
and then redirects to a webpage where the 
files can be downloaded? 

If we can still get this great content with 
the digital editions then that's great. But if 
not, I would like to offer this as feedback 
that online readers would most certainly 
still like to avail of the content. 

Thanks for the feedback. Currently there 
is no way for digital subscribers to get 
the content from the disc found in the 
printed version of the magazine. The 


suggestion you have made is a 
undoubtedly a viable and workable 
solution, and one that may well be 
implemented in the future. To ensure 
that you still get the basic tutorial files for 
each issue, they are available online and 
can be found at www.webdeslgnermag. 
co.uk/tutorial-files. 



Comments from the Blog 



A 

fek Web Designer is always keen to hear from its readers, followers and visitors. Here we bring 

Cj 

h together a specially selected collection from the last month. It seems that Thord Daniel 


^ Hedengren's column 'Serious Dislike' in Issue 201 has divided opinion 


A 

@thejamiefraser 

@no1_son 

M 

^ @tdh 

£ 

Tl @WebDesignerMag Excellent 

4 @WebDesignerMag 


V Onol son 1 obviously 

% 

jj^ comment by @tdh social 

"Serious dislike" article. 


disagree. That people aren’t 


buttons are a nightmare to 

Totally disagree with @tdh 


sensitive to loading times is 


work with, n evn worse for 

Most users are not like u 


a myth squashed by mobile 


low share counts, negative 

and couldn’t care less about 


data. 


impact 

tiny lags 



The fresh front-ends tutorial also sparked some admiration: 



M 

Raja said: Nice overview! 1 

^1^ Mina said: It’s seems really 

A 

Leah said: WoW ! This 


M haven’t used CS6 yet. 

great features that 1 haven't 

i 

^B really looks amazing. 


hopefully I’ll get it soon. I'm 

mW# used yet. 1 hanks tor 


wff thanks for the wonderful 


^ excited about the 3D 

tutorial 


tutorial. Thanks a lot for 


features. 
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development 

Seize the 
dev 



Ashraf is the director of product 
management at Brightcove, a global 
provider of cloud content services. 
His previous employers include 
Nokia and Motorola, where he 
worked on digital video 
solutions, security features 
andwebapps. 




i 


Why there’s never been a better time to be a developer 


N ever before have such a number of powerful tools and 
technologies been so accessible and affordable. With the 
growing importance of dynamic user experiences, the brands 
that are winning are those with a truly innovative approach, working with 
web designers to capitalise on consumer demand for rich, visual content. 
But how did we get here and what is the new role of the web developer 
in today's digital economy? 

Since the birth of interactive webapps in the mid-Nineties, we've been 
on a path of convergence between content and software, an evolution 
which has continued to elevate the role of the developer in a rapidly 
evolving digital landscape. New labour markets have appeared as a 
result of this shift towards content-centric software, and we've seen the 
birth of new disciplines such as user-centred design, which have 
underscored the growing importance of content and design in the 
creation of good software. 

A decade-and-a-half back, the web browser ushered in a document¬ 
centric view of software apps in response to end user preferences for 
content-centric experiences. What do I mean by 'content-centric? Back 
then, it was the evolution of software from traditional desktop software 
apps with monolithic forms-based user interfaces, into document-based 
interfaces with richer, more content-based experiences. 

Fostered by the rapid adoption of broadband and Wi-Fi, the media/ 
software fusion powered through the early stages of web 2.0, giving rise 
to new programming languages and models that opened up software 
creation and spawned new online industries - everything from gaming 
to rich media advertising, user-generated media and the online video 
industry. And it parallels the rapid rise of software-as-a-service, with 
nearly every category of business software having been re-implemented 
in a rich, browser-based interface with a more content-rich UX. 

The introduction of the iPhone - and the clone devices and software 
environments that have emerged in its wake - as well as the App Store 
model, has meant that software itself has become content, triggering an 
incredible range of content-rich and content centric software application 
experiences. As both new device platforms and SAAS models have 
grown, the race to bring richer forms of content experiences into the 
browser and onto these devices has also accelerated, and the industry 
has galvanised around HTML5 as the next-generation of content-centric 
application authoring and delivery. 


The proliferation of cloud-based computing and application models 
has grown rapidly alongside the rise of the iPhone and SAAS. By taking 
advantage of accessible and affordable hosted computing resources, 
more and more functions are being made available as cloud services 
that developers can build on. The first component of this shift has taken 
the form of infrastructure-as-a-service offerings such as Amazon Web 
Services, Google App Engine and Windows Azure. These layers abstract 
the complexity of hardware, storage, networking, databases, and other 
fundamental infrastructure needed to operate online software. 

We’ve also seen a wave of new platform-as-a-service offerings, 
designed to abstract a significant set of functions and data-models into 
collections of coherent APIs - enabling developers to easily and rapidly 
build rich apps. A great example are Facebook's Open Graph APIs for 
adding social features, as well as dozens more discrete functions from 
mapping and GeoData, to push messaging and search. What’s more, 
we’re seeing an increase in open platforms allowing developers to 
participate in the evolution of software through open source SDKs and 
open collaborative platforms - Google Code, for example, for software 
distribution, and the likes of Stack Overflow for knowledge sharing. 

The explosion in new device platforms is driving organisations around 
the world to invest in software that takes advantage of these services. 
Organisations of every size are seeking to create webapps, phone and 
tablet apps, smart TV apps (shortly) and Facebook apps. 

They’re also having to rethink the entire model they use for publishing 
content and how they create rich, content-centric application 
experiences around that content Legacy, home-grown and installed 
content models are giving way to SAAS and PAAS models, spawning 
new software categories such as video platforms, app platforms, and 
myriad standalone API services. 

As the role of software in society continues its relentless expansion, it's 
an exciting time to be working in web development, and there’s never 
been a better range of tools on offer. At the core of all of this is an ongoing 
revolution in the economics of software manufacturing, with richer and 
richer building blocks available as inexpensive pay-as-you-scale utilities 
for millions of developers all around the world. 

As Internet software grows in importance to organisations globally, 
developers - as the technical leaders and contributors in this game - are 
undoubtedly becoming the decision-making elite of the digital economy. 
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Pay As You Go 
Advertising 

Advertise on Google. 

Pay only when people click on your ad. 


For most types of advertising, you pay for people to see your ad. With Google AdWords advertising you 
only pay when they click to visit your website. So you get exactly what you pay for - more customers. 
And because this is pay-as-you-go advertising, you have complete control. 



Control how much you spend 

You can set a daily spending limit and an amount you're happy to pay for people to click 
on your ad. The price is chosen by you, not us, so you never have to worry about going 
over your budget. 



Control who sees your ad 

Your ad will only appear when potential customers are searching online for relevant 
terms you've chosen to describe your business. 



Control where and when they see it 

You can choose to target your audience by location and time: attract local customers 
during your opening hours or, if you'd rather, promote yourself to a global audience 
round the clock. 


Voucher missing? 


Don't worry, someone in your company 
have beaten you to it. Track them down and 
make sure their 




£25 is turned into £100* 


Offer only available to businesses in the UK. 


Don't miss out - try it today 
We ll turn your first £25 of advertising 
into £100*. To start attracting new 
customers today: 



Visit google.co.uk/adwords 



Or call 0800 169 0478 


'Calls to 0800 numbers are free from BT landlines but charges may apply if you use another phone company, call from your mobile phone or call from 
abroad. Support is available in English only. Offer subject to website and business qualification. 

Terms and conditions apply. In order to activate this offer, you need to enter the promotional code through the Billing tab in your account before 
31/12/2012. Promotional codes have no promotional value and entry of the promotional code serves only to begin your qualification for the associated 
promotional credit. To qualify for the promotional credit you must accrue advertising charges in the amount of £25 within 31 days of entering your 
promotional code. For example, if you enter the code on 05/12/2012 you'll have until 05/01/2013 to accrue advertising charges in the amount of £25. 

In all circumstances, you must enter your promotional code before 31 /12/2012 in order to activate this offer. Your account must be successfully billed 
by AdWords and remain in good standing in order to qualify for a promotional credit. The promotional credit will be applied within approximately 5 days 
of your account reaching the threshold for accrued advertising charges specified above, as long as you've activated your account using the promotional 
code and fulfilled all requirements stated in the offer. Once applied, the promotional credit will appear on the Billing Summary page in your account. 

For the complete terms and conditions, see http://www.google.co.uk/adwords-voucherterms. Google Ireland Limited, a company incorporated under 
the laws of Ireland, with company registration number 368047 and registered office address at Gordon House, Barrow Street, Dublin 4, Ireland. 
Copyright 2012. Google and Google AdWords are trademarks of Google, Inc. and are registered in the US and other countries. 
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comment 


Andy is the front-end developer at 
Cube 3 - a team of award-winning 
strategic, creative, digital experts 
who believe in building exceptional 
brand concepts and profiles; 
creating engaging platforms 
and user experiences that 
seamlessly integrate 
into the market. 


Andy Chubb 


Don’t let the mobile web pass your brand by 


M obile is quickly becoming the main way people are 
browsing the web. As of July 2012, approximately 105% of 
all web traffic occurs through mobile devices (rww.to/ 
N2BS8Z). Recent hardware advancements in mobile devices such 
as smart phones, tablets and Ultrabooks, as well as improving 
network access, mean that people are now browsing the web from 
a variety of places. These trends are set to continue with the advent 
of more web centric operating systems (rww.to/Mw2XCF) and the 
continuing evolution of smartphone apps (bit.ly/PG6YnU). Taking 
your brand on to the mobile web means you are going head to head 
with your competitors in a unique marketplace, and you need to 
provide your users with the best experience you can offer regardless 
of mobile limitations. 

It is becoming more important to carry brands on to this platform 
in new and exciting ways. For some user groups this may well be the 
first interaction they have with the brand, so first impressions are 
very important. But how does designing and developing on mobile 
platforms differ from traditional web development? 

One of the key aspects that must be considered is how you are 
going to develop your site on the mobile web. Do you want to 
emulate the look and feel of a native mobile app? There are some 
excellent frameworks out there which can help you achieve this 
such as jQuery mobile (jquerymobile.com) and Sencha Touch 
(www.sencha.com/products/touch). The main advantage of 
working with these frameworks is that the site will be more intuitive 
as it blends well with the device's native touch gestures and exhibits 
similar behaviours. This can be particularly advantageous if you are 
required to build a site that acts like an app, or if you need to put 
together a mobile site in a short amount of time that you can be sure 
will be supported on major mobile devices. The disadvantages are 
the loss of some customisation and individuality that you may 
experience when building within a framework. 

The alternative approach is to use a combination of HTML5, CSS3 
and JavaScript to create a bespoke build. The main advantage here 
is that you are free to create the site how you envisage it. This is 


undoubtedly more labour-intensive, however the end result can be 
engaging and a site created that stands out while offering a superior 
user experience. Sometimes the best option may be to try and find 
a balance between the two. Offering the right level of device support, 
coupled with a tailor-made visual experience. 

It must be considered where and how the user will potentially be 
using the site. User scenarios (blog.usabilla.com/how-user- 
scenarios-help-to-improve-your-ux) are an important tool that can 
help identify these. In terms of design, many of the visual elements 
of a mobile site can be developed purely using advanced styling 
techniques available in CSS3. Things such as gradients, shadows 
and shapes can be combined to create the graphical elements of 
your site without the need to load in images. Another big advantage 
of this approach is that you can resize these elements easily which is 
important given the variety of screen sizes on the mobile web. When 
you do need to use an image, look at ways to use it that will keep the 
file size down, such as creating your own repeating textures based 
on a small graphic. Remember, in order to support a range of pixel 
densities you will need to create at least two versions of each image, 
so it is worth spending time optimising them right from the start. All 
this helps to create an extension to your existing branding without 
compromising speed or quality. 

A lot of the individuality in mobile sites and apps is in the details, 
such as custom designed icons that can be changed and adapted to 
work on different displays. The creation of a good icon that looks 
crisp and clean and sits nicely within the device’s native interface is 
another opportunity where you can use your branding to your 
advantage. As with images it may require the generation of multiple 
icons at varying sizes to support the range of mobile devices out 
there. Again, it is worth spending time creating these as a poorly 
rendered icon isn't going to do your brand any favours. 

Overall, a brand presence on the mobile web can be created to 
match and enhance an existing on or offline brand, the design and 
behavioural subtleties should remain almost invisible to the user. 
Most importantly it needs to work - wherever it’s being used. 


A lot of the individuality in mobile sites and apps is in the details 
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vCPU HDD 
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Fully scalable and customisable 

Your VPS specs can be modified on the 
fly to ensure you can meet any sudden 
changes in demand or popularity. 


VPS without compromises 

Affordable yet high-quality VPS hosting 
without compromise. We use branded 
Intel processors and Dell servers in our 
UK data centre. 


Advanced virtualisation technology 

KVM is the latest generation of virtualisation 
technology, offering high-performance 
access to server resources for both Linux and 
Windows virtual private servers. 

0 (gw* ® Ss 

"A 1 * SUSE debian ^ 


From only £11.99 per month 


✓ 24/7 UK Support ✓ Free & Instant Setup ✓ 99.99% Uptime SLA ✓ Full root access 


Find out more: www.heartinternet.co.uk 
Call us: 0845 644 7750 


Web hosting I Reseller hosting I VPS I Servers 



Price excludes VAT at 20% 










BOOKMARKS 

This issue we engage with the practical and the sustainable. A 
host of experts including Andy Clarke and Paul Boag offer 
advice on redesigning a website, while Opera open standards 
evangelist Chris Mills tackles the practical implementations of 
CSS3. Sustainable user experience and how to create motion 
and voice-based interfaces with the Kinect API rounds us off. 



REDESIGN THE WEB 

$39.90 

blt.lv/IH1MzK 

Smashing Magazine is one of 
the leading resources for web 
creatives, and its books follow in its 
footsteps. Redesign the Web is not 
about redesigning the web but the 
process, tools and techniques needed 
to redesign a site. The book's aesthetic 
is very much the Smashing brand, with 
plenty if code examples and colour 
images to assist the reader. It's broken 
down into 11 chapters, all written by 
well-known experts, including Paul 
Boag. Andy Clarke and Rachel Andrew 
to name a few. The separate chapters 
offer self-contained segments, which 
interrupt the flow of the book. On the 
other hand, readers can jump straight 
to the content they want. 

non 

PRACTICAL CSS3 

$35.99 

www.peachpit.com 

The author Chris Mills is an 
open standards evangelist who 
works for Opera and has a vast 
knowledge of the subject at hand. As 
the title suggests, this tasty tome is a 
practical guide to the styling language 
that all web designers need to know. 
The writing style is easy to follow and 
there are a host of practical code 
examples ably accompanied by 
captioned images. The subject matter 
covered includes web fonts and 
typography, the popular CSS effects, 
border-radius, box-shadow, multiple 
backgrounds, and the art of CSS 
animation. Beyond the more obvious, 
grids, layout modules, multi-column 
layouts and responsive design and 
media queries all get a look in. 

nnnn 


LEARNTHE KINECT API 

$34.99 

ww w . microsoft.c om/mspress 

If you were to judge a book by 
its cover then this tome from 
Microsoft Press would get a good 
slating. However, the cover holds 
much less credence than the content. 
Motion-inspired interfaces are 
undoubtedly going to have a part to 
play in the web experience, and this 
book offers enough to start 
developing now. The book starts, as 
many do, with an introduction before 
introducing the Kinect sensor and a 
practical example of how to build an 
app. Past the basics, there is a whole 
chapter on how to create advanced 
user interfaces using movement and 
speech. If you want to develop with the 
Kinect API this is a good place to start. 

USER EXPERIENCE IN THE AGE OF 
SUSTAINABILITY 

£18.99 

www.mkp.com 

A snappy title typically engages 
the reader - unfortunately this 
offering doesn’t tell us much. It is 

about user experience, but from a 
different angle. The book concentrates 
on the role that UX has beyond its 
more obvious applications. The book is 
very much aimed at a niche audience, 
but the content and presentation are 
engaging and well presented. This is a 
practical take on the subject with case 
studies and personal stories. Readers 
will learn how to integrate sustainability 
into designs using user research 
methodology, techniques and 
purposeful metrics, and how working 
sustainably applies to mobile and 
digital products. 
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MapBox is a service that uses open-source tools 
and the cloud infrastructure to create beautiful 
custom maps. The premise is to make maps more 
social, offering compatibility across the web and 
mobile. Users create in the cloud and publish in 
minutes. The free MapBox plan includes 3000 map 
views a month, going up to 10000 for $5 a month. 


BRACKETS 

Free 

brackets.io 

Brackets is a code editor built with HTML, CSS and 
JavaScript, and currently runs as a desktop 
application across operating systems. The editor 
isn’t currently the complete article but for those 
with a sense of adventure it is worth trying out. 
Head to the website to find out more. 


I0SAPP 


Adobe 

Shadow 

Free 


I od 




If you haven’t 
explored the 
potential of 

Adobe Shadow, then now is definitely the time to 
download the free app and try it out. The app is 
easy to use and allows users to wirelessly pair 
devices to test out a single site across different 
devices. A great app for tweaking HTML and CSS, 
and seeing updates in real-time. 




m 


Brackets 


About Brackets 
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DESK 


desk.cmiscm.com 

Development technologies CMS using PHP, ActionScript, Objective-C. Object, 
Pooling and Bitmap Data technology, Photoshop for design, FDT and Xcode 



Designer Jongmin Kim 

cmiscm.com 

A site that otters a window into what can often be 
the intimate creative spaces of the world’s 
developers and designers 
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ften overlooked, the 
humble desk still holds a 
fascination right across 
the creative 

environment. Even in a 
world where working on 
the move is possible, the 
desk remains a place 
where designers and 
developers can feel at 
home as they work. 

This site from Jongmin Kim gives a 
glimpse into the creative spaces of a 
wide range of designers, as Kim 
explains: "DESK is a platform for 
creators to share and find inspiration in 
the very places they create - their 
desks. It pays tribute to creative 
professionals’ unsung, most personal 
work. Users can upload a gallery of 
their own desk and browse through a 


gallery of others’. Previously 
unrecognised, the desk is often just as 
much a work of art as the projects they 
are used to create.” 

Each desk space is offered to the 
viewer as a photomontage with image 
transitions that always hold the viewer’s 
interest. The site is addictive in that 
viewing just one desk is simply 
impossible. The designers’ desks on the 
site have clearly been staged, but this 
just adds to the attraction. 

Kim also ensured that the site itself is 
both easily accessible and works 
efficiently as you scroll through the 
available desks. If you find one you like, 
a variety of social media sharing is just 
a click away This is a wonderfully 
realised site that is superbly executed. 
Be prepared to lose an hour or so as 
you enter this site for the first time. 


•• DESK is a platform for creators to share 
and find inspiration where they create iil 


DESK 



<Above> 

• The homepage of the site offers myriad desks to 
choose from. Watch the screen scroll, or use your 
mouse to find a desk to view 


abcABC 1234567890 

<Above> 

• Designed by the Swiss Adrian Frutiger, Univers 
has become a firm favourite for its clean lines. The 
font is available from a wide range of foundries 
including Linotype 

<B«low> 

• The world-famous Helvetica was designed in 
1957 by Max Miedinger. The sans serif font can be 
found in many weights at the Linotype foundry 

abcABC 1234567890 
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Got it? Flaunt it! Tell us about your site webdesigner@imagine-publishing.co.uk 


AROUT MJRMIT YOUR t)f« CASf STUD 
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<Below> 

• A superb scrolling archive of each desk on the 
site is easily accessible from whatever page you 
happen to be on 




#E8E8E8 #FFFFFF #FFC911 



#9E7DF5 #7BAE4D #D4C354 


<Top left, clock wise> 

• Each desk is showcased on its own 
page, with large photomontages of 
each desk space. Scroll to see more 
images of the designer at work 
• The page transitions when a desk 
is chosen are always smooth and 
well-executed. Bold colours provide 
solid and engaging backgrounds to 
each image 
• Sharing desks that you find 
interesting is made easy, as social 
media buttons are available on each 
image within a desk’s portfolio 
• Viewing the site on an iPad is a 
pleasure. An app and a poster are 
available to allow you to celebrate 
the desk in all mediums 
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Know a site that deserves to grace these pages? Tweet us now ^ @WebDesignerMag 


Rule of Three 

rule-of-three.co.uk 

Development technologies CSS3, Parallax scrolling, jQuery plug-in, 

Superscrollorama 



Designer Will VileS 

www.willviles.com 

Bold graphics and strong typography 
leads this site, which is fitting for a 
copywriting service 


arrying a clean design 
statement with strong 
typographical skills 
makes this site standout 
from the crowd, as Dan 
Ramirez, the senior 
copywriter at the 
copywriting wonder- 
company Rule of Three 
explains: “The concept 
for the site was simple, 
yet ambitious: we wanted to create a 
site unlike any other copywriting site. 
Really, copywriting is an integral part of 
the creative industry. Yet, all too often, 
copywriting websites seem entirely 
divorced from the creative discipline, so 
we wanted to make a bold statement 
informed by both copy and design." 

Few sites use text to its full advantage. 
That’s not the case here, but handling 
the typographic components of the 
site was only part of the design 


approach. “From our first brainstorming 
session, it was abundantly clear Dan 
wanted to make the text do all the work, 
with big, bold, defining statements a 
prominent feature,” commented Will 
Viles, the site's designer and developer. 

“Two things instantly came to mind. 
Firstly, this site was to be read like a 
book. Every sentence in Dan’s copy is 
somewhat profound, so I felt each 
statement deserved its own line break. 
Creating the perfectly sized font 
hierarchy (using hi all the way to h7) 
styled the system beautifully." 

The strong monochrome approach 
to the design instantly shouts that this 
site is about the skills of the copywriter. 
Beautifully rendered fonts are placed 
meticulously on each page as they 
smoothly scroll by. If you’re looking for 
a perfect example of minimalist design 
that effortlessly meets its design brief, 
look no further. 



Creating the perfectly-sized font 
hierarchy (using hi all the way to h7) 
styled the system beautifully IMP 



Welcome to 
Rule of Three 



<Above> 

• The About page is a typical example of 
well-chosen fonts laid out with consummate 
spacial awareness 
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RULE of THREE 

THK COfYfliriNO STUDIO 

W>rds. 

As with sunbeams, the more we condense 
them, the deeper they bum. 

_ Rule of Three Copywriters. _ 

Tkink copywriting. 

Think intelligent message design. 

Think powerful results for your business. 



<Above> 

• From the homepage of this site it’s clear that 
words and not pictures take centre stage 



#2C2C2C #FFFFFF #C6CCCC 



#F3F3F3 #FDFDFD #212121 

abcABC 1234567890 
abcABC 1234567890 

< Above, Top> 

Part of the Google Font set, Sorts Mill Goudy by Barry 
Schwartz offered the perfect font in all weights 

<Above, bottoin> 

The italic variety of the Sorts Mill Goudy from Google 
Fonts perfectly complements the full Roman set 



<Top left, clockwise> 

• Typography alone would not 
convey the central message of 
the site. Subtle graphics are 
also used to annotate the key 
textual messages 

• The core brand values of the 
services are communicated 
with a minimal yet highly 
effective design 

• Visitors can see the latest 
news and events from the site’s 
blog, that of course follows the 
same typographic rules 

• There is no doubt about what 
services this site offers. The 
uncluttered design is attractive 
and understated 


lightbox 


25 











Know a site that deserves to grace these pages? Tweet us now ) @WebDesignerMag 






<Above> 

• The site contains masses of information, but the 
navigation ensures you never get lost 


<Below> 

• Caecilia LT Standard is used throughout the site. 
Developed by Peter Matthias Noordzij, it is 
available from fonts.com 

abcABC 1234567890 



abcABC 1234567890 

<Above> 

• The ever classic Times font offers a sense of 
elegance, and is available in numerous weights 
from Linotype 




<Top left, cloclcwise> 

• A new life can be yours on 
Kiawah Island was the brief; 
it is amply met on each page 
showcasing a different 
aspect of island life 

• The site is also a 
commercial space for real 
estate and potential 
developers. Both these 
requirements are designed 
seamlessly into the site 

• Find your bearings on 
Kiawah with the interactive 
map that is fully integrated 
into the site’s design 

• Clearly leisure is one of the 
main components of living 
on the island. The site design 
places this front and centre 
on every page 
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<Ab»ve> 

• Right from the homepage community and the 
quality of life that the island can offer is shown 
with bold images 



#5E8DA5 #EBECD4 


Kiawah Island 

www.kiawahisland.com 


Development technologies Code Platforms, HTML5, CSS3, jQuery 1.7, EllisLab Codeigniter 



{e} house studio 


Designer fe} house Studio 

www.ehousestudio.com 

A site design that perfectly communicates a lifestyle 
and a community that anyone would want to visit 
time and time again 


crolling and clicking through this 
site gives an attractive impression 
of Kiawah (meaning something 
different') Island, that has become 
an exclusive destination for many. 
The site had to reflect the values 

•••••• 

that this community offers, as 
Aaron Quinn explains: “We set out 
to create a site that tells the story of 
the unique Kiawah lifestyle and 
community, as well as the breadth 
of amenities and activities, while showing 
the endless natural beauty. We wanted people 
to get a better idea of what life is like on 
Kiawah Island and how they can 
become a part of it.” 

Images, video and well-chosen typographic 
components make each page on this site 


highly engaging, which is precisely what the 
clients wanted. “Strike a balance between 
enticing content and visuals that leaves 
prospective users wanting more and content 
that satisfies with substance,” Quinn continued. 
“Focusing content in areas where people are 
especially interested in learning how Kiawah 
can satisfy their lifestyle needs and how the 
social infrastructure can make it easy to make 
friends and fit into the community.” 

Using actual content during the design 
phase allowed {e} house to clearly visualise how 
each page would communicate its content. As 
a site that had to offer multiple user groups the 
information and insight they need, the design 
developed here is precise, comprehensive and 
above all else speaks to the community values 
that the island stands for. 


# f We set out to create a site that tells the story of 
the unique Kiawah lifestyle and community § § 


lightbox 


27 










































I 

<clesigncliary> 

| Peterbrooke Chocolat ier 



s 

W6b I www.peterbi'oofce.tom 

Company I Station Foot 

Web I www.stationfour.com 


protect iPeterbrooUe 
Chocolatier 



Station Four is Florida-based agency 
that designs sites, builds brands and 
brings the art of selling online to the 
masses. It was brought in to revamp, 
and add consistency and 
functionality to the Peterbrooke 
Chocolatiers brand 

Chris Olberding: “Earlier in 2012, another client of ours, 
Hickory Foods, completed the purchase of Peterbrooke 
Chocolatiers, and they brought us in to discuss the state 
of their new acquisition’s web presence. 

“The Peterbrooke website Hickory Foods inherited had 
inconsistent brand usage, confusing organisation, and a 
weak overall design. The site ran an old version of Magento 
Community Edition, which bloated the database so badly 
the host would shut the site down every few days. 

“Peterbrooke was preparing to show a chocolate 
high-heel on Good Morning America to promote the 
Oscars afterparty, and came to us needing something fast. 

“Our first step was to stabilise the current website long 
enough for us to create a new one. We wrote a script that 
cleaned up the database nightly, which at least ensured the 
website wouldn't regularly crash. 

“The project posed a challenge, as we were working on a 
tight deadline with a recently acquired brand undergoing a 
transition in management. We were fortunate to have 
worked with Hickory Foods before. Their trust in our talent 
and ability to deliver a polished product allowed us to 
streamline our typical process. 

“Given the constraints, we used Magento's hosted 
eCommerce solution, Magento Go, which would allow an 
easier migration of product data from the current site, 
making for a smooth transition for the admins, and simplify 
deployment. Given Peterbrooke’s long term goals and Go's 
limitations, we understood this to be a temporary solution." 



Mill 


Chris Lahey, 


director of developme 


Sean Collins 
UX engineer 




^Mac Grossman, 
^senior designer 

IF 


S WEEKS ’ 

^ DURATION 

__ j—I // 

0 , 

isuring that visitors understood thebrand was criticalto the ethos behind 

e site. Station Four decided to go ‘big’ on the brand's gourmet aspect 

... ,11_11^,-, \A/!3\/< 


berding: “Peterbrooke has an ever-growing number 
franchises and store locations, so in addition to 
:reasing online sales, the website needed to 
tablish and promote the Peterbrooke brand. Also, as 
iu would expect, Peterbrooke’s sales are highly 
asonal. Early on, we knew we wanted to do something 
g' that would quickly convey the fun yet gourmet 
ipects of the Peterbrooke brand. High-quality 
locolate is an emotional buy for individual customers, 
most cases, it’s being purchased for a loved one for a 
Dliday, a birthday or an anniversary. Our goal was to 
now the final presentation of the products and try to 


get users to connect with the brand. In a lot of ways its 
similar to marketing jewellery - the higher quality and 
price represented by the brand is sometimes as 
important as the gift itself. 

“Station Four took the lead on the strategic and 
creative direction for the new website. Mac and I 
brainstormed and sketched out some concepts, and 
eventually decided a large 3D shelf that the products 
would sit on would allow us to showcase a continually 
changing product line. We also liked the idea of 
changing colour in the type and navigation to fit with 
the background colour of each individual slide. 
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Peterbrooke Chocolatier | 
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I Chr is Olber dingl 
partner and CEO| 
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M Katharine Berry. W 
Production Manager] 


The core focus had to be the product, and a host of assets 
from a catalogue photoshoot accompanied by targeted 
promotions, ensured a well-presented products 

Mac Grossman: “Our first design step, as it homepage, we worked on translating that 
is on most of our web projects, was to aesthetic across the board. Since this was an 

create a set of wireframes that would help eCommerce project, there was special 

us envision both the layout and tone of the attention paid to both the category and 
new website. Right from the start, we knew product pages. We put a particular 

we d want to put the focus on the products, importance on the selection of chocolate 

so we structured the homepage to feature a type (ie milk chocolate, dark chocolate, etc) at 

large banner that would rotate through the category level and developed a selectable 

seasonal chocolate and promotions. We were filter that allowed a user to search for just the 
provided with a ton of assets from their right product. We organised the product 

catalogue photoshoot, and we put them to detail page to be as user-friendly as possible. 


VA\tV> CM*lQlAl€ Vofiogv, 


*«*rH jCKp 



Hi MI6H7 f\LW 




good use by developing a cache of holiday 
banners so we can drop in a new one when 
the seasons change. After we nailed down 
the overall look of the design with the 


by featuring a big product image as well as an 
easy ‘add to cart’ process. This light product 
detail approach we believe helps to convert 
users in to sales.” 
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< design diary> 

| Peterb rooke Chocolatier 





The Peterbrooke Chocolatier eCommerce 
presence was built with the Magneto Go 
platform. A separate HTML/CSS 
standalone site provided an easy option 
for dropping in styles and markup 

Grossman: “Due to our established project constraints, we knew 
we would be working within the structure of a hosted 
environment. So to make sure we could integrate the details we 
outlined in our designs, we quickly coded an HTML/CSS 
standalone site. This would aid us later by giving us the ability to 
drop in existing styles and markup within the Magento Go platform 
to achieve a spot-on design integration. In addition, many hosted 
eCommerce solutions don't offer great support in terms of 
development environments. Having the standalone website allows 
us to tweak and perfect the skeleton of the website before we start 
mucking around with the extra code generated by Magento Go. 

“Magento Go being a hosted solution meant we didn't have 
access to as many files and folders that were necessary in making 
changes to the core functionality. This was both beneficial and 
difficult in a few ways. We took our standalone HTML pages and 
implemented them through their themes editor rather quickly; 
however, working with the WYSIWYG and CSS editor can be a pain, 
because it isn’t as easy to save and view changes as it is when you 
are using your local machine. Some other complications we ran 
into regarding the hosted environment were dealing with 
additional functionality such as cross platform @font-face and 
custom jQuery. These took some extra time to implement and 
debug because we were working with a server that we didn’t have 
full access to, as well as dealing with issues regarding the HTTP 
and HTTPS portions of the secure checkout. 

“Furthermore, required custom development wasn’t possible 
out of the box, but we were able to modify and work with the 
solutions offered through the Magento Go extension library to 
achieve the project’s initial requirements. Overall, we are happy 
with the outcome. We were able to successfully transplant our 
design and the backend of the site runs perfectly, allowing 
Peterbrooke to have full control over the multitude of eCommerce 
resources provided by Magento.” 
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Olberding: “The launch of the store was fairly painless, 
which is one of the reasons we went with a hosted 
platform. When we use the off-the-shelf version of 
Magento to redesign an existing eCommerce website, we 
insist on weeks, if not months, of testing to ensure a 
seamless transition to avoid any hiccups. 

“Hickory Foods has been cross-marketing Peterbrooke 
with their other brands at events around the country, 
distributing coupons that are redeemable on the new 
website. Combined with increased sales through the 
website and higher brand recognition Peterbrooke is 
planning to expand their stores and franchises nationally. 
We have received a lot of positive feedback from 


administrators of the website and the management at 
Hickory Foods, as well as customers using the new site. 
Over the next year we plan on working with Peterbrooke 
to migrate the website to a more sophisticated platform 
that will allow for better integration with their order 
management process and social marketing efforts." 
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The transparent 
,rT iage slider works 
with the fixed 
background, which 
changes colour to fit 
the theme of the 
product on display. 


The colour palette 
for each product 
background is 
expertly chosen. 
Here, a range of 
fuchsia colours are 
used to signify 
romance. 
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basilico* 

interactive 

The sweet 
smell of 
success 

This issue northern Italian-city Brescia is the 
destination where we get talkative with Basilico 
interactive. They happily call themselves digital 
geeks, adhere to the ethos that technology 
should be invisible, and tell of how they like to 
blur the line between work and play 

who Basilico interactive wliat Italian digital specialists providing 360 digital solutions 
where Vicolo Quadra 13,25086 Rezzato (BS) web www.basili.co 


•••••••••••••••••a 


asilico is a digital agency based 
in Brescia, Italy, and its speciality 
is rich-media interactive 
experiences across a host of 
platforms, with extra care for 
web marketing and 360 digital 
media campaigns. 

The studio helps to maximize 
*••••••••••••** brands, engaging people to 

interact with amazing web 
tools. On the Basilico menu is 
user experience, web design, web development, 
content editing, SEO, SEM, and social media marketing. 

The agency opened only two years ago, and has 
won numerous awards for the quality and creativity of 
its online creations. Basilico’s prized recipe is simple: stir 


together three medium-seasoned digital geeks, pour in 
some wild graphics and a bunch of fresh designers, 
whisk vigorously to avoid plenty of accounts people or 
excess overheads to complicate your intent, set aside 
for a little while, et voila! Your web gizmo is served on 
time and on budget. Simply sprinkle with fresh basil to 
get the perfect blend. 

Basilico interactive is a relative newcomer to the 
digital arena, but it has evolved and expanded quickly 
as project leader Michele Gallina explains: “The studio 
started off as a classic three man band, Dharma the 
web designer, Patrizio the developer, and myself as 
project and art director, each with ten years experience 
on our own fields. The main goal was building fresh and 
engaging projects focusing on UX and interaction 
design, with particular care for details, which is the 
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In the same period it digitised Angela 
Morelli’s infographic about Virtual 
Water, and in September a new 
front-end developer and a web 
marketing expert joined. 


Basilico timeline 


Established 2010 

Founders Michele Gallina, Dharma Ferrari, 
Patrizio Begni 


In March, two more employees 
joined and Basilico developed its first 
mobile app. In November it gained 
recognition from CSSdesignawards 

forbrixiaexpo.it. 


In the beginning of 2012 an SEO 
marketing figure joined Basilico. 
In March it was awarded Site of 
the Day by Awwwards for the 


December. Basilico was founded by 
Michele Gallina, Dharma Ferrari, Patrizio 
Begni, and in the beginning it was joined 
by, Romina (graphic designer and 
front-end developer). 


project bagigia.com. 


studio mantra to this day. Well rooted in Italian design 
heritage, the agency offered a crisp approach to 
effective website design from day one, receiving 
awards for its online creations from some of the most 
prestigious institutions in the field. The team was 
quickly challenged with projects for national brands, 
moving fast towards international assignments - the 
first in London for the International Student Film 
Festival. At present the studio has eight residents, with 
projects for European. American and Indian market." 

The name and associated branding of an agency 
needs to be consistent and easy to remember. Gallina 
believes that it doesn't have to be obvious, but does 


need to hint at what an agency is involved in. “The 
main goal for an agency name is being easily 
remembered. We don’t believe it is mandatory to have 
a name that states what you do; we chose a name 
that rather gives a hint of how we do whatever we do. 
We were looking for a name that could be immediately 
visualised suggesting a flavour arousing a pleasant 
memory and a bit of curiosity. Basilico is the Italian 
word for basil - one of the most popular herbs used in 
Italian recipes. The name came about as a joke among 
friends and we liked it straight away it is familiar yet 
essential, fresh with a strong personality, and was 
perfect for a playful URL: www.basili.co” 


A memorable name and brand is undoubtedly a 
key element in the success of an agency. However, 
the product needs to match up to the hype to avoid a 
lack of trust. Gallina explains how important the 
agency’s website is, "The website it is the essential tool 
for our online presence; for a web agency is the first 
chance to show its orientation. We want our website 
to be as clear as possible and easy to consult. The 
portfolio is king, with a comprehensive range of styles 
to help the visitor to orient at a glance. We released 
three versions of our website in two years and are 
currently working on a fourth one, in which we’d like 
to show more of the creative process. The aim is to 
make technology invisible.” 

There is no doubt that clients are the lifeblood of 
any agency, and attracting business is critical to 
continued success. Gallina reveals how Basilico 
attracts new clients: “Word of mouth was our first 
strategy; each of the founders brought a solid client 


• • [Basilico] is familiar yet essential, fresh with a 
strong personality and is perfect for a playful URL i j IP 
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IIII Basilico isn’t particularly Adobe-centric, with the 
exception of Creative Suite for graphic design IP IP 


portfolio to begin with, and the team immediately set 
about pursuing excellence, at first working over 
budget, focusing on design interaction and UX 
without many compromises. Thanks to this initial 
effort the studio gained quickly in credibility and 
reputation, starting partnerships with well established 
agencies in a sort of virtuous cycle. These days we 
can count on an incessant demand that gives the 
studio a nice and stimulating prospective to focus on.” 

As more work comes an agency’s way, there is the 
option to be more selective. Gallina explains that 
Basilico does not look at project size, but rather how 
the agency and the client can work together. “Every 
project is potentially creative and interesting. Basilico 
maximises how brands engage people to interact 
with amazing web tools. The agency is in the position 
of selecting projects, but the team direction is about 
establishing a shared goal with the client to proceed 
with maximum transparency ensuring the project 


reaches its creative potential. This way the creative 
process is as fluid as a conversation; eventually, 
selection of ideas to move forward with comes natural 
for both parties.” 

Every project needs a team of experts to make it 
work. Gallina gives an insight to how Basilico 
approaches a new brief and how the various roles are 
typically assigned to a new project. “The agency 
builds websites, apps, content and other charming 
gadgets for the web, but we approach each project as 
a whole. We create well crafted tools to communicate 
on the web, and the process is very simple. We start 
with a web brand analysis to develop a web strategy 


(10 per cent of time). This way we and the client have 
a clear vision when choosing tools, content and a 
creative direction suitable for the project (10 per cent 
of time). Once the goals are set by the project 
manager and the creative director, the project enters 
conception, involving the creative director and UX 
designer; art direction and graphic production (30 per 
cent of time); HTML integration (30 per cent of time 
with web designers and HTML integrators); and last of 
all, development and final testing (20 per cent of time 
with interaction designers and developers). 

The agency takes advantage in the practice of 
Agile, a method that promotes adaptive planning and 
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•• A website is a medium for content on the web, 
which today can be reached by many devices IP IP 


evolutionary development trough a conceptual 
framework that promotes foreseen interactions 
throughout the development cycle, encouraging 
rapid and flexible response to change.” 

Experts need the right project creation tools for the 
job. Development director Dharma Ferrari reveals 
that Basilico are not slaves to the Adobe suite, but like 
to mix and match a combination of tools from the 
Creative Suite with other pieces of open-source 
software. ‘‘Basilico isn’t particularly Adobe-centric, 
with the exception of Creative Suite for graphic design. 
Balsamiq (www.balsamiq.com) is the trusted 
software to produce wireframes. The dev desk has 
seen a variety of tools, some of which are open 
source: NetBeans, TextMate, Sublime Text, Versions, 
and Transmit are just a few." 

There is a point where all projects eventually come 
to an end. Once a project is complete it is time to hand 
it over to client and let them take control. Cofounder 
and back-end developer Patrizio Begni explains the 
handover process and the aftercare provided by 
Basilico. “We are very keen on SEM (search engine 
marketing) - a project never ends with the online 
launch, the website is the starting point of a web and 
social presence. We have a three-month period of 
after sales with strong monitoring and updating 
providing the essential tools for a complete web 
campaign. Clients will be constantly aware of 
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WEB _www.basili.co 

FOUNDERS .Michele Gallina, Dharma Ferrari, 

........Patrizio Begni 

YEAR FOUNDED .2010 

CURRENT EMPLOYEES ......7 

LOCATIONS _Brescia, Italy 


SERVICES 


> User interface design 

> Websites 

> Mobile apps 

> Web marketing 

> Social media marketing 

N J 


innovative solutions and marketing strategies related 
to their product. The agency is the main channel to 
keep up with the ever changing trends on the web.” 

Certain tools are seen as the technologies that will 
build the web over the coming years. Ferrari explains 
which, and how important they are to Basilico, but 
also how time-consuming achieving browser 
compatibility is. “HTML5, CSS3 and jQuery are the 
backbone of our creativity. These amazing 
technologies allow an incredible variety of possibilities 
and solutions to develop and integrate content and 
informations, enhancing the user experience to be 
the best it can be. Thanks to these relatively new 
languages, websites are really cross-platform. Testing 
compatibility is an essential task that is often 
underestimate by clients: the most time-consuming 
part is HTML integration, as achieving cross-browser 
compatibility and consistency across devices is the 
toughest part, especially if you produce responsive 
design. Nonetheless, browser compatibility is 
mandatory, neglecting this detail would be like 
publishing a book without proofreading. People 
would not only miss the point of the story, but 
potentially trust a misleading version of it.” 

No digital campaign is complete without a liberal 
dose of social media. Gallina explains how important it 
is, but also the need to tailor the use of social media 
platforms such as Twitter and Facebook. 

“Twitter and Facebook are essential tools for a 
social media presence - an integral part of any digital 
campaign. Social platforms in general are places for 
web conversations, which is the most open and 
engaging interaction a brand can start with its target 
nowadays. However, social media presence is almost 
taken for granted lately, but starting a conversation 
isn’t necessary the priority in a brand development. 
It’s essential to tailor the right tools for the client one 
step at a time. For instance, a restaurant could find 
Foodspotting more useful than Twitter, and a new 
product would need more urgently a dedicated mini¬ 
site than a massive social presence that would start a 
conversation beforehand.” 

Mobile devices are a key consideration when 
building a site. Responsive design is the current 
golden boy of web design, but this is not always 
considered the ideal solution. Ferrari explains that it is 
the nature of the project that determines which is the 
best option rather than the popular choice. “A website 
is a medium for content on the web. which today can 
be reached by many devices. This is a powerful and 
amazing way of spreading information, so mobile is a 
key component of the web experience. Basilico 
designs and develops every website with consistency 
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** Testing compatibility is 
an essential task that is 
often underestimatedby 
clients. The most time- 
consuming part is HTML 
integration, as achieving 
cross-browser 
compatibility and 
consistency across devices 
is the toughest part 99 


across devices. Responsive design is a viable solution, 
but ultimately the nature of the project defines the 
criteria for the appropriate answer, and sometimes a 
more custom option could be the best way.” 

It’s common knowledge that an agency is only as 
good as the people it employs. Without the right team 
the end product will not be as good as it can possibly 
be. Gallina reveals the type of personnel that drive 
Basilico forward. “Basilico is made by passionate and 
smart people who are very engaged in their field. 
Finding solutions is only a way to unlock new solutions 
in a process of constant analysis towards better 
developments. Great creativity comes from discipline. 
The team isn’t afraid to say that keeping an eye out for 
new and creative formulas is part of its strategy, they 
put content on the web, but don’t forget to listen, read 
and keep updated trough the most powerful channel 
of information the present has to offer.” 

Gallina goes on to explain what traits they look for 
in prospective employees. “Great creativity comes 
from fun too! Basilico is a human-sized studio, with a 
cat, a couch, a shared kitchen, and obviously a basil 
plant on the table, the team shares more than laptop 
screens and is encouraged to take breaks and 
alternate focus time to playful activity. We look for 
passionate and smart people with a strong disposition 
to self-improvement. Our team is a group of close 
friends, we like to blur the line between work and play.” 
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KEY PROJECT 


Bagigia 

www.bagigia.com 


Bagigia is a cutting-edge Italian brand that produces 
bags with classic Italian styling. The site reflects the 
brand across its pages using an array of gorgeous 
textures and contemporary fonts. 

The challenge for Basilico Interactive was to 
demonstrate the outstanding quality and style of the 
product online. The agency needed to try and let 
people experience the bag in the same way they 
would in the shop across the street, so it was faced 
with a particularly engaging challenge. 

Their solution: a landing page with a 360 overview. 
The rotation is controlled by the user interacting with 
downwards-scrolls, so they can rotate the bag, and are 
able to linger on each angle to appreciate its charm. 

Then the details are shown through a more 
traditional and simple navigation: the designer, the 
manufacture of the product and the packaging is 
shown, and then the user can discover the collection. 
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Personal creative blogs 

Designers know they have to produce imaginative, engaging and functional 



The post date and comments really 
t help set the individual posts apart. 
L The texture, detail, colour and k 
font combine gracefully to 
add style. 


The Jan Mense logo in the top-left 
corner hides a neat animation 
^ effect. Place the cursor on i 
^ the logo and watch it A 
go square. 


THIS IS 

NEW 


MRCTHMS 

mrcthms.com/journal 

Development platform Word Press 

This site is the online home of Marc Thomas and 
provides an insight into himself, his work and his style. 
The glasses logo creates a focal point, but it's the 
colours and use of fonts that make it memorable. The 
layout is a simple one-column affair, with a big image/ 
video to embellish the post. The neat cloth texture 
used for date and comments is a real touch of class. 


Jan Mense 

www.janmense.de/blog 

Development platform WordPress 

The bright yellow background instantly gives the site 
impact; it’s hard to miss. To complement the 
eye-catching background the site uses an old 
favourite, black and white, to produce the post style. A 
script style headline font adds a touch of impudent 
style and engaging images ensure that a reader’s 
attention is held for as long as possible. 


A Super Creative Blog 

scriblinmind.wordpress.com 

Development platform WordPress 

If you needed a blog to define the term blog this would be 
a great place to start. It has all the elements typically 
associated with a blog, but without any of the thrills and 
spills. It is the simplicity that makes the site engaging and 
enthralling. A white background with black text is hardly 
original, but the mixture of fonts, font-weight and colours 
make this a classic. 
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<blog beautif ul> 

Personal creative blogs | 


seen^rsuggesl Tweet a 140 with your blog’s address directly to % @WebDesignerMag 
a theme Email your suggestions to ft webdesigner@imagine-publishing.co.uk 

sites to enhance their reputation. Here are six blogs that do exactly that 


Rose Lee 


mwM taut.* 

I 'Ik. ~ 



ggSSSsaa: 




aar- sass 

ft —- 








BLOG 


.O 

« CODE HINTING FOR 
DREAMWEAVER 


ATrapacFMfvTum 


Home About Joumri Contact 


.© 


••OTWITTER ♦ PHP ♦ 
ARDUINO ♦ NERF = 
TWITTER POWERED 
NERF GUN... 



© 


GOROOSTR.COM; FULLY 
RESPONSIVE, FULLY 
AWESOME 



The incredibly simple logo, font and font 
shadow bring the blog to life 


Rosie Lee 

rosielees.co.uk/news 

Development platform HTML, CSS, JavaScript 

This blog is very much a one-stop-shop where all the 
necessary components make their presence felt. 
There is no need to click through to another page, 
the post will happily appear to the right. The layout 
instantly engages the user and keeps them rooted. 
The colour combinations are gentle, and having a 
full-colour image in a post anchors the focal point. 


Adam.co 

adam.co/blog 

Development platform HTML. CSS, JavaScript 

At first glance this site seems a very simple affair, but on 
closer inspection it combines clever little nuances along 
with general design elements to create a great-looking 
blog. The headline font is a standout feature and its 
combination with the body font make great viewing. The 
use of light grey and a very subtle background texture 
help establish a solid and readable layout. 


Greg Thompson 

theg regthom pson.com/jou rna I 

Development platform Word Press 

A classic blog layout that is spruced with a number 
of elements to take it beyond the average. The simple 
background texture creates a canvas from which to 
build. However, It is the incredibly simple logo, font 
and font shadow that are the standout elements and 
bring the blog to life - and with a complementary 
image to boot, this a great example of the art. 
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Discover the art of 
interactive page design 
with a collection of 
essential Ul techniques 
for perfect page 
chemistry 
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JONNY POLONSKY 
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OLD FLAME RECORDS 


IPHONE ONCE A DAY 
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Facebook Groups Get Dropbox File 
snaring 


The Ostrich Pillow Passes S70k 
Kickstaner Target in unoer a week 
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J avaScript is the language that provides the platform for a host of 
■'"siblings, including the web designer’s library of choice, jQuery. This 
wasn’t always the case - it was inconsistent and unwieldy - but the 
introduction of jQuery took the language to a new level. 

The library simplified the art of coding and brought it closer to web 
designers who wanted to create attractive and dynamic page elements 
without the need for an extensive knowledge of the language, or the use of 
Flash. The beauty of jQuery lies in its simplicity and flexibility. The language 
may still seem like a maze of unfathomableeode for many. But without it, the 
task of creating interactive Ul elements that populate the best sites on the 
web would be a far harder task. 

jQuery can bring design to life, but still ensure that its associated elements 
are functional and effective. Accordions, tabs and date pickers can all be 
powered to add dynamism to simple blocks of code. With the code in place 
jieii gners simply need to bring their core CSS skills into the equation to start 
styling th^functional to match a chosen design. jQuery provides the base, 
while CSS a^d imagination provide the beauty. 

What is it that helps simplify the process? What is the secret power behind 
the language web designers and developers love? Plug-ins. These are 
effectively self-contained blocks of code that perform a specific task. And. 
the best bit is there are thousands of them waiting to help you create desired 
Ul effects in doublerquick time. To fully embrace jQuery, discovering how to 
develop a plug-in really is the icing on the cake. 

There is no doubt that jQuery has levelled the playing fieldTJy'tucjdng 
workarounds for the various browser quirks that still exist into its API. 

Launch Trigger and $.ajax, and let jQuery do the hard part. 

Creating beautifarflnteractive interfaces and page elements has never 
been easier thanks to the jQuery library. Now is the time to delve into the 
mysteries of jQuery and discover how to start turning the science into 
beautiful design. 



DON’T USEJQUERY 

Much like Ruby on Rails, many developers’ first introduction to JavaScript was through 
jQuery. This lead to a common cycle learn jQuery, fall in love, dig into vanilla JavaScript and 
level up. While there's certainly nothing wrong with this cycle, it did pave the way for 
countless articles, which recommended that users do not use jQuery in various situations, 
due to ’performance issues’. 

It wouldn’t be uncommon to read that it's better to use vanilla for loops over $.each. Or. 
at some point or another, you might have read that it’s best practice to use document. 
getElementsByClassName over jQuery’s Sizzle engine, because it’s faster. The problem 
with tips like this is that they take the idea of pre-optimisation to an extreme, and don’t 
account for various browser inconsistencies - the things that jQuery fixed for us! Running a 
test and observing a saving of a few milliseconds over thousands of repetitions is not a 
reason to abandon jQuery and its elegant syntax. Your time is much better invested in 
tweaking parts of your application that will actually make a difference, such as the size of 
your images, for instance. 

MULTIPLE JQUERY OBJECTS 

This second anti-pattern, again, was the result of the community (including yours truly 
at one point) not fully understanding what was taking place under the jQuery hood. As 
such, you likely came across (or wrote yourself) code, which wrapped an element in 
the jQuery object countless times within a function. 

001 $(‘button.confirm’).on(‘click’, function() { 

002 // Do it once 

003 $(‘.modal’).modal(); 

004 // And once more 

005 $(‘.modal’).addClass(‘active’); 

006 // And again for good measure 
007 $(‘modal’).css(...); 

008 }); 


While this code might, at first, appear to be harmless (and truthfully is, in the grand 
scheme of things), we’re following the bad practice of creating multiple instances of 
the jQuery object. Every time that we refer to SC.modaD, a new jQuery object is being 
generated. Is that smart? Think of the DOM as a pool: every time you call SCmodaD, 
jQuery is diving into the pool, and hunting down the associated coins (or elements). 

When you repeatedly query the DOM for the same selector, you’re essentially 
throwing those coins back into the water, only to jump in and find them all over again! 

Always chain selectors if you intend to use them more than once. The previous 
code snippet can be refactored to: 

001 $(’button.confirm’).on(’click’, function() 

002 { 

003 $(’.modal’) 

004 .modal() 

005 .addClass(’active’) 

006 .css(...); 

007 }); 

008 Alternatively, use “caching.” 

009 $(’button.confirm’).on(’click’, function() 

010 { 

011 // Do it ONLY once 
012 var modal = $(’.modal’); 

013 modal.modal(); 

014 modal.addClass(’active’); 

015 modal. css(...) ; 

016 }); 


With this technique, jQuery jumps into the DOM pool once, rather than three times. 
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JQUERY: THE SCIENCE OF BEAUTIFUL DESIGN 



SELECTOR PERFORMANCE 

While not as ubiquitous these days, not too long ago the 
web was bombarded by countless articles on optimising 
selector performance in jQuery. For example, is it better 
to use $Cdiv p') or $Cdiv’).findCp')? 

Ready for the truth? It doesn’t really matter. It’s 
certainly a good idea to have a basic understanding of 
the way that jQuery’s Sizzle engine parses your selector 
queries from right to left (meaning that it’s better to be 
more specific at the end of your selector, rather than the 
very beginning). 

And of course, the more specific you can be, the 
better. Clearly, $(‘a.button’) is better for performance 
than $C.button’), due to the fact that, with the former. 
jQuery is able to limit the search to only the anchor 
elements on the page, rather than all elements. 

Beyond that, however, too much attention is paid to 
selector performance. When in doubt, put your trust in 
the fact that the jQuery team is comprised of the finest 
JavaScript developers in the industry. If there is a 
performance boost to be achieved in the library, they 
will have discovered it. 

And if not them, one of the thousands of community 
members that make up this great online hub of design 
and development will submit a pull request. 

With this in mind, be aware of your selectors, but 
don’t concern yourself too much with performance 
implications, unless you yourself can verbalise why 
doing so is necessary. 

CALLBACK HELL 

jQuery has encouraged widespread use of callback 
functions, which can certainly provide a nice 
convenience. Rather than declaring a function, simply 
use a callback function. For example: 


001 $(‘a.external’).on(‘click’, function() { 
002 // this callback function is triggered 
003 // when .external is clicked 
004 }); 

005 

You’ve certainly written plenty of code that looks just 
like this; I know I have! When used sparingly, anonymous 
callback functions serve as helpful conveniences. The 
rub occurs down the line, when we enter (trigger 
thunderbolt sound...) callback hell! Callback hell is when 
your code indents itself numerous times, as you 
continue nesting callback functions. 

Consider the following, quite common, code below: 


001 $(‘a.data’).on(‘click’, function() { 
002 var anchor = $(this); 

003 $(this).fadeOut(400, function() { 
004 $.ajax({ 

005 // ... 

006 success: function(data) { 

007 anchor.fadeln(400, function() { 

008 // you’ve just entered callback hell 
009 }); 

010 } 

011 }); 

012 }); 

013 }); 

014 


PLUG-IN DEVELOPMENT 

Find out how to create a relatively simple 
MessageBox plug-in with this demo. 

Attach a method 

The first step is to activate $.message. Rather 
than extending jQuery’s prototype, for this plug-in's 
requirements, we only need to attach a simple method 
to the jQuery 


001 namespace. 

002 (function($) { 

003 $.message = function(text) { 
004 console.log(text); 

005 }; 

006 })(jQuery);_ 

007 


It's as easy as that! When you call S.messageCHere is 
my message’), that string should be logged to the 
browser's console (Shift+Cmd+I in Chrome). 


Test code 

There’s not enough room to cover the process 
of testing the plug-in, but try using jQuery’s test suite, 
QUnit. Test-drive the code from Step 1 by writing: 


001 module('jQuery.message’, { 

002 test('is available on the jQuery 
namespace', 1, function() { 

003 ok($.message, 'message method should 
exist’); 

004 }); }); 

005 


The ok function, available through QUnit simply 
asserts that the first argument is a true value. If the 
message method does not exist then false will be 
returned. Following the test-driven development pattern, 
this code would be the first step. Once you’ve observed 
the test fail, the next step would be to add the message 
method. Visit the GitHub repo for this project to review 
all the tests for the plug-in: bit.ly/QrESIZ. 


Display message 

Let’s take the provided message and display it to 
the user. However, rather than embedding a huge glob 
of code into the S.message method, simply use the 
function to instantiate and initialize a Message object 


001 (function($) { 

002 "use strict”; 

003 var Message = { 

004 initialize: function(text) { 
005 this.text = text; 

006 return this; 

007 } 

008 }; 

009 S.message = function(text) { 
010 // Needs polyfill for IE8— 
011 return Object.create(Message). 
initialize(text); 

012 }; 

013 })(jQuery); 

014 
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EasyJet’s site has a date picker built in to an accordion menu 

As a basic rule of thumb, the more indented your 
code is, the more likely there’s a code smell. Or better 
yet, ask yourself, does my code look like the Mighty 
Ducks’ Flying V? 

When refactoring code such as this, the key is to ask 
yourself, 'how could this be tested?’ Within this 
seemingly simple bit of code, an event listener is bound 
to a link, the element fades out. an AJAX call is being 
performed - upon success, the element fades back in, 
and presumably, the resulting data will be appended 
somewhere. That sure is a lot to test! 

Wouldn’t it be better to split this code into more 
manageable and testable pieces? Certainly. Though the 
following can be optimised further, a first step to 
improving this code might be: 


001 var updatePage = function(el, data) { 
002 // append fetched data to DOM 
003 }; 

004 var fetch = function(ajaxOptions) { 
005 ajaxOptions = ajaxOptions || { 

006 // url: ... 

007 // dataType: ... 

008 success: updatePage 
009 }; 

010 return $.ajax(ajaxOptions); 

011 }; 

012 $(‘a.data’).on(‘click’, function() { 
013 $(this).fadeOut(400, fetch); 

014 }); 

015 



Even better, if you have a variety of actions to trigger, 
contain the relevant methods within an object. 

Think about how in a fast-food restaurant, such as 
McDonalds, each worker is responsible for one task. Joe 
does the fries. Karen registers customers, and Mike grills 
burgers. If all three members of staff did everything 
- not just their own jobs - this would introduce a variety 
of maintainability problems. 

When changes need to be implemented, we have to 
meet with each person to discuss them. However, if we. 
for example, keep Joe exclusively focused on the fries, 
should we need to adjust the instructions for preparing 
fries, we only need to speak with Joe and no one else. 
You should take a similar approach to your code; each 
function is responsible for one task. 


Not only does this approach, again, make the 
Message object more testable, but it’s also a cleaner 
technique. Think of this Message object as the 
representation of a single message box. 

Add a <div> 

If Message represents a single message box, 
what will be the HTML for one? Let’s create a div with a 
class of message-box and make it available to the 


The object has an immediate reference to the 
wrapping div for the message box. To gain access... 


001 var msg = Object.create(Message). 
initializeO; 

002 // [<div class= “message-box” style= 
“display: none”> </div> ] 

003 console.log(msg.el); 


005 // [<div class= "message-box" style= 
"display: none"> Here is an important message 
</div> ] 


It’s unlikely we’d want to insert the text directly into 
the div. More realistically, the message box will have a 
template. While we could let the user of the plug-in 
create a template and reference it, let’s keep things 
simple and confine the template to the Message object. 
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JQUERY: THE SCIENCE OF BEAUTIFUL DESIGN 



Handlebars provides the power necessary to let you build semantic templates 
effectively with no frustration 

Mustache templates are compatible with Handlebars, so you can take a Mustache 
template, import it into Handlebars, and stari taking advantage of the extra Handlebars 
features. 


Download: 1.0.beta.6 


Getting Started 


Handlebars templates look like regular HTML, with embedded handlebars expressions. 


<dtv class- entry"> 
<hl>{{title»</hl> 


Handlebars is a fantastic templating engine that’s easy to use 


In the code above, the fetch function merely triggers 
an AJAX call to the specified URL The updatePage 
function accepts some data, and appends it to the 
DOM. Now. if we want to test one of these functions 
to ensure it’s working, eg the updatePage method, 
we can mock the data object and send it through to 
the function. 

REINVENTING THE WHEEL 

It’s important to remember that the jQuery ecosystem 
has matured greatly over the last several years. Chances 
are. if you have a need for a particular component then 


someone else has already built it Certainly, continue 
building plug-ins to increase your understanding of 
the jQuery library (in fact we’ll write one in this 
article), but, for real-world usage, refer to any potential 
existing plug-ins before reinventing the wheel. As 
an example, need a date picker for a form? Save 
yourself the leg-work, and instead take advantage of 
the community-driven - and highly tested - jQuery 
Ul library. 

Once you reference the necessary jQuery Ul library 
and associated stylesheet, the process of adding a date 
picker to an input is as easy as doing: 


001 cinput id=”myDateInput” type=”text”> 

002 <script> 

003 $(“#myDateInput”).datepicker({ 

004 dateFormat: ‘yy-mm-dd’ 

005 }); 

006 // Demo: http://jsbin.eom/ayijig/2/ 

007 </script> 

008 

Or what about an accordion? Sure, you could write 
that functionality yourself, or instead, once again, take 
advantage of jQuery Ul. Simply create the necessary 
markup for your project. 


In situations where you have absolutely no choice but 
to nest HTML into your JavaScript, a popular approach 
is to store the HTML fragments as items within an array, 
and then join them into one HTML string. Update the 
initialize method to: 


001 initialize: function(text) { 


© Button options 

For the message box to be flexible, the plug-in 
user needs to have the ability to optionally specify, 
among other things, which buttons should be presented 
to the user. We should be able to add the following... 


1001 $.message('Are you sure?’, { 


008 initialize: function(text, 
this.el = $(‘<div>’, {‘class': 
‘style’: ‘display: none’}); 

settings) { 

‘message-box’, 

009 this.text = text; 

010 this.settings = settings 


011 this.el.html(this.template(text, buttons)); 

|012 } 

_ 


002 // ... 

003 this.el.html(this.template(text, buttons)); 


002 buttons: [’Yes', 'Cancel'] 

003 }); 


A ^ Default buttons 

On Trigger we build the message box’s structure: 

...and generate a message box that has two buttons. 

To implement this functionality, first we are going to 
need to update the $.message definition. 

We assume that the plug-in user will describe 
which buttons to present: if not, provide defaults. 

001 <div class=”message-box” style=”display: 


002 var msg = Object.create(Message); 



none;”> 

|002 <p class=”message-box-text”>Here is an 
important message.</p> 

|003 <div class=”message-box-buttonsx/div> 


■ 0 

0 

■ 0 

0 


004 $.message = function(text, settings) { 
005 var msg = Object.create(Message); 

006 msg.initialize(text, settings); 

007 return msg; }; 


003 msg.initialize(text, settings); 
004 return msg; 

005 }; 

|006 $.message.defaults = { 














001 <div id=”accordion”> 

002 <h3><a href=”#”>Chapter l</a></h3> 

003 <div><p>Some text.</px/div> 

004 <h3xa href=”#”>Chapter 2</ax/h3> 

005 <divxp>Some text.</px/div> 

006 <h3xa href=”#”>Chapter 3</ax/h3> 

007 <divXp>Some text.</px/div> 

008 <h3xa href=”#”>Section 4</aX/h3> 

009 <divXp>Some text.</px/div> 

010 </div> 

Then, automagically turn it into an accordion. 

011 $(function() { 

012 $(“#accordion”).accordion(); }); 

What if you could create tabs in thirty seconds? 

013 <div id=”tabs”> 

014 <ul> 

015 <lixa href=”#tabs-l”>About Us</ax/li> 

016 <lixa href=”#tabs-2”>0ur Mission</ax/li> 

017 <lixa href=”#tabs-3”>Get in Touch</ax/li> 

018 </ul> 

019 <div id=”tabs-l”> 

020 <p>About us text.</p> 

021 </div> 

022 <div id=”tabs-2”> 

023 <p>0ur mission text.</p> 

024 </div> 

025 <div id=”tabs-3”> 

026 <p>Get in touch text.</p> 

027 </div> READ No Comments 

028 </div> 


Browse Archive 



RECENT POPULAR MOST COMMENTED 


Blazers C Camby charged with 
Marijuana 

fLy.L-J Dec 5. 297 days ago 


Prosecutors considering 
allegations vs. Kobe 

it ii Dec 5. 297 days ago 


Rhymin’ and stealin’: Nets owm 
Jay-Z recruits 

.a Dec 5. 297 days ago 


Dec 5, 297 days ago 


Nowitzki says he won’t be signi 
to play overseas 

it Dec 5. 297 days ago 


SportEdge Magazine is the best Sport Word Press 
theme we could have come up with, that’s a given! As 
you can see for yourself, it has a powerful adrenaline 
vibe to it, with a very dynamic homepage slider and 
bold typography.... 


Italian team is courting Kobe 
Bryant 

< Dec 5.297 days ago 

Nowitzki says he won’t be signi 
to play overseas 

it, M Dec 5.297 days ago 


And activate the plug-in. 


SportEdge WordPress theme is a great example of tabbed content 


With this approach, should the plug-in user need to 
modify the defaults, he only needs to update $.message. 
defaults. Remember: never hide the defaults from the 
user. Make them available to 'the outside.’ Here, we’ve set 
a few defaults: the icon, buttons, and a callback function 
which should be triggered when the user clicks a button 
in the message box. jQuery has a way to override the 
default options for a plug-in via its extend method. 


001 initialize: function(text, buttons) { 

002 777 ! 

003 this.settings = $.extend({}, $.message, 
defaults, settings);} 


With this modification. this.settings will now be equal 
to a new object If the plug-in user specifies any settings, 
they will override the plug-in’s defaults object. 

CSS class 

If we intend to add a custom icon to the 
message box, dependent upon the action, it’ll be 


necessary to add a CSS class to the element, and allow 
the user to apply a background image accordingly. 
Within the initialize method, add: 


001 this.el.addClass(‘message- 
box-’ + this.settings.icon); 


If no icon is specified in the settings object the default 
- info - is used: .message-box-info. Now we offer CSS 
classes, containing various icons for the message box. 


001 .message-box-info { 

002 background: url(path/to/info/ 
icon.png) no-repeat; 

003 } 

004 .message-box-warning { 

005 background: url(path/to/ 
warning/icon.png) no-repeat;} 


Ideally, as part of your MessageBox plug-in. you’d 
want to include an external stylesheet that contains 


basic styling for the message box, these classes, and a 
handful of icons. 

HTML inputs 

The plug-in now accepts an array of buttons to 
be applied to the template, but we haven’t yet written 
the functionality to make that information usable. The 
first step is to take an array of button values, and 
translate that to the necessary HTML inputs. Create a 
new method on the Message object to handle this task. 
createButtons: function(buttons) {} jQuery.map is a 
helpful method that applies a function to each item 
within an array, and returns a new array with the 
modifications applied. For each item in the buttons array, 
such as ['Yes’, ’No’], replace the text with an HTML input, 
with the value set. 


001 createButtons: function(buttons) { 

002 return $.map(buttons, 
function (button) { 

003 return ’<input type="submit" ^ r , 
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JQUERY: THE SCIENCE OF BEAUTIFUL DESIGN 


029 $(function() { 

030 $(“#tabs”).tabs(); 

031 }); 

Done! It doesn’t even require any notable 
understanding of JavaScript. 

THE THREE KEYS TO GREAT CODE 

Over the course of building the sample MessageBox 
plug-in. a variety of best practices have emerged, such 
as avoiding callback hell, writing testable code, making 
the default options available to the plug-in user, and 
ensuring that each method is responsible for exactly 
one task, and one task alone. 

While one could certainly achieve the same effect by 
embedding countless callback functions within $. 
message, doing so is rarely a good idea, and is even 
considered an anti-pattern. Remember the three keys to 
maintainable code and flexible plug-ins and scripts: 
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1. Could I test this? If not. you must refactor and split 
the code into chunks. 

2. Have I, at any point, offered the ability to override 
my default settings? 


3. Am I following any practices that are generally 
accepted to be bad. or making assumptions? 

To learn more about jQuery development, refer to 
the free screencast course. ’30 Days to Learn jQuery’. 



Next, update the initialize method to 
call this new method. 


005 initialize: 
function(text, settings) { 
006 this.el = $('<div>', 
{'class': 'message-box’, 
'style': 'display: none’}); 
007 this.text = text; 

008 thi^s.settings = 

$.extend({}, $.message, 
defaults, settings); 

009 var buttons = this. 
createButtons(this.settings. 
buttons); 

010 this.el.html(this. 
template(text, buttons)); 

011 return this;} 


Click action 

W A good place to store all event 
listeners for a view is within a special 
events method on the associated object, 
just like this: 


001 initialize: function() { 
002 // ... 


[on(‘click’, function() { 

009 self .closeQ; 

010 if ( typeof self, 
settings.callback === 
‘function’ ) { 

011 self.settings.callback. 
call(self, $(this).val()); 
012 } 

[013 });} _ 


This code is slightly more complex, 
due to the fact the user of the plug-in 
needs to have the ability to trigger their 
own callback function, when a button is 
clicked on the message box. The code 
determines whether a callback function 
was registered, triggers it. and sends 
through the selected button’s value. 
Notice where we call self.closeO? That 
method, which has yet to be created, is 
responsible for one thing: closing and 
removing the message box from DOM. 


014 close: function() { 
015 this.el.animate({ 

016 top: 0, 

017 opacity: ‘hide’ 

018 }, 150, function() { 
019 $(this).remove(); 

020 });} _ 


box to the user. Add one last show 

^ Use plug-in 

method on the Message object, which 

To use your new plug-in, simply 

will insert the message box into the 

call S.messageO and pass through a 

DOM, and position it 

message and any applicable settings. 


001 show: function() { 

002 this.el.appendTo(‘body’). 
animate({ 

003 top: $(window).height() 

/ 2 - this.el.outerHeight() 

/ 2 , 

004 opacity: ‘show’ 

005 }, 300);} 


A simple calculation positions the box 
vertically in the centre of the window. 


001 $.message = 
function(text, settings) { 
002 var msg = Object. 
create(Message). 
initialize(text, settings); 
003 msg.show(); 

004 return msg; }; 


1 001 $.message('The row has 
_been updated.'); 


Or. request confirmation to destruct. 


001 $.message('Do you really 
want to delete this record?', 
{ 

002 buttons: ['Yes', 

'Cancel'], 

003 icon: ’alert', 

004 callback: 
function(buttonText) { 

005 if ( buttonText === 'Yes' 


006 // proceed and delete 

record 

007 } 

008 } 

009 }); 



Do you really want to delete this 
record? 
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Create 
images with 
code using 
GD and PHP 

This month we take a look into 
creating and manipulating images 
purely using code, and creating 
thumbnails on the fly 

tools I teoli I trends GD, PHP, Dreamweaver 
expert Pete Simmons 




reating graphics purely from code is 
a practice that dates back to the 
dawn of gaming. Developers would 
be able to create basic geometric 
: shapes with a few lines of code 
(anyone remember Battlezone?) 

Although this process has come a 
long way. the creation of geometries 
with code is still common practice in 
game creation and serves as a way of 
freeing up vast amounts of memory we also see this 
technique port over to web development. 

GD library is a framework that once was separate 
from PHP, but since PHP 4.3 it comes bundled as part of 
most PHP setups. This tutorial will assume that you have 
a working GD framework in place. If you don't, see the 
set-up instructions on the PHP manual website at 
uk.php.net/manual/en/image.installation.php 
Alternatively you can download the latest version of 
XAMPP which comes bundled with a working 
up-to-date version of the GD image framework. 

It is important to think about the order in which you 
do things in a PHP script with GD elements. It is 
important that you remember to free up memory at the 
end of your script, if you have large numbers of users it 
can quickly overload your server if you don’t. 



Verify your setup 

It’s worth checking your PHP configuration to 
ensure that you are able to modify images using the GD 
library. Create a new PHP document and add the 
following line only. Save it as ’phplnfo.php’ and run it via 
a browser. Do a search on this page for GD to ensure 
everything is enabled in your GD setup. 

001 <?php phpinfo(); ?> 

Setting a header 

Well be outputting just an image without any 
HTML surrounding it. This means well be able to call 
our PHP script from within an IMG tag and pass 
variables over to it, from a separate file. Create a new 
PHP document and add the following code, this tells 
PHP to only output a PNG image. 

001 <?php 

002 header('content-type: image/png'); 
003 ?> 

Create a square 

Now that we have our output set, we can create 
some basic shapes using code alone. The following line 
of code will set up an image that measures 256 x 
256px. Using the imagecreate function, the code will 
then attempt to render out a PNG file using the 
imagepng function. Running this code now will give you 
the broken image icon. 


001 $image = imagecreate(256, 256); 

002 

003 imagepng($image); 

Adding some colour 

In order for us to get any kind of usable output 
image from our PHP, we need to add some colour to 
our square. Adding the following line of code calls up 
the imagecolorallocate function, and assigns an RGB 
value to our square. The RGB value takes in each colour 
value as a numerical value. Render in your browser to 
see the results. 

001 Simage = imagecreate(256, 256); 

002 imagecolorallocate($image, 255, 

255, 0); 

003 imagepng(Simage); 

Getting RGB values 

There are several free tools online that will be 
able to give you a set of RGB numerical colour values. 
Alternatively you can get these numbers by using the 
colour picker tool in Photoshop and making a note of 
the R, G and B numbers in the dialogue box. 

001 <li> 

002 <a href="<?php the_permalink(); 

?>" title="<?php the_title_attribute(); 
?>”> 

003 <?php the_title(); ?> 
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Create images with code using GD and PI-IP 


fin Support 

ana hied 

GD Version 

Bundled (2 0 31 compatible) 

Free Type Support 

enabled 

Free Type Linkage 
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Free Type version 
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gif Head support 
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JPEG Support 
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hbJPEG Version 

PNG Support 
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kbPNG Version 

1246 

WBMP Support 
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XRU Support 
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Directive 
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<Cloclcwise front top left> 

• The phpinfoO function provides information 
about our hosting setup and ensures we can use 
the GD functions 

• We have set up our 256 x 256px PNG image, but 
there are no other attributes assigned to it yet 

• The Color Picker tool in Photoshop is an easy way 
to obtain an RGB colour value 

• By assigning an RGB value to our square, we are 
now able to output a PNG image using only code 


Color Picker (Foreground Color) 
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004 </a> 

005 </li> 

Using fonts 

The next logical step would be for us to add 
some text to this image. In order to do so we must add 
a font file to our server directory. Grab a TrueType font 
and upload it to the same directory as your PHP files. 
You can then call it using the following code. 

001 Sfont = 'Origin-Bold.ttf’; 


Assigning text colour 

Before we can use our recently added font, we 
need to assign a colour to a variable, this will then allow 
us to assign the variable to the font element that we will 
add later on. Use the imagecolourallocate function as 
before, adding the following code. We can now make 
anything white by using $white. 

001 $white = imagecolorallocate($image, 255, 
255, 255); 


Adding a string 

We can now add our text to our image - we’ll do 
this using the function imagettftext. This function takes 
in a total of eight variables. In order they are; the image 
we are modifying, the font size, font angle, text X 
position, text Y position, text colour, font file and the text 
string we are adding. 

001 $string = ’Hello World!'; 

002 

003 imagettftext(Simage, 25, 0, 12, 140, 

$white, $font, $string); 

Destroying an image 

The final and probably most important step 
when creating an image using the GD library is to 
destroy the resources at the end of the code. This will 
free up memory on your server, very important if you 
have a high number of users using your code. Add this 
single line before the closing PHP tags. 

001 imagedestroy($image); 


Image resize script 

One of the most common uses for the GD 
library is creating thumbnails from images. Over the 
next few steps we’ll use some of the previous 
techniques to create a PHP function to do that. Create a 
new PHP document and add the following. This will 
create our function and allow us to pass variables into it. 

001 <?php 
002 

003 function createThumbnail($image, $width, 
$height) { 

004 
005 } 

006 ?> 

Get image dimensions 

" In order to resize our image into a thumbnail, we 
need to get the size of the original file. To do this we can 
use a GD function called getimagesize, combined with a 
PHP list function. The list function will assign the width 
and height to a new variable. Add the following code 
within your function. 
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Create images with code using GD and PI-IP 


Hello Horld 



<Top left, clockwise* 

• Our newly created Hello World image, produced only with code and a 
TrueType font file 

• Our thumbnail is created, however it looks a bit squashed. Also the alpha 
channel has been replaced with black 

• If you do not set your headers you’ll get the raw data of the image, rather 
than the image itself 

• Our script now creates a directory on our server, after checking that a 
folder with that name does not exist already 

• With our code finished the script now saves the thumbnail image with 
the original filename amended 




</> * 


Why so 
many IFs? 

You may notice a lot of 
repeated IF statements; 
this is because functions 
need to be completed in 
a very specific order with 
the GD library. 


001 list($originalWidth, 

SoriginalHeight) = getimagesize($image); 

Checking file types 

At this point, we need to know if the file being 
passed to our function is a JPG or PNG. We can 
establish this by evaluating the filename past the last ful 
stop. Note that GIFs are no longer supported by GD. 
Add this PHP search command within your function. 

001 $filetype = explode('.', Simage); 

002 if (preg_match(’/jpg|jpeg/’, 
$filetype[l])){ 

003 Soriginallmage = 
imagecreatefromjpeg($image); 

004 } 

005 if (preg_match(’/png/', $filetype[l])){ 
006 Soriginallmage = 
imagecreatefrompng(Simage); 

007 } 


Creating square thumbnails 

By adding the following code, we are able to 
create a perfectly square thumbnail 100 x lOOpx wide. 
This does mean that the original image will be 
squashed, rather than retaining its original proportions. 
Add the following code at the createThumbnail function 
- this will create a resampled version of our image, but 
will not output it yet. 

001 $image_tn = imagecreatetruecolor($width, 
Sheight); 

002 imagecopyresampled($image_tn, 
Soriginallmage, 

0, 0, 0, 0, Swidth, Sheight, SoriginalWidth, 
SoriginalHeight); 


14 


One more IF 


We need to add one more IF statement to our 
function in order to output our thumbnail. As before, 
this code will check the extension of the file and create 
a thumbnail in either a PNG or JPG format. The create 
image functions take in quality values -1-100 for JPG 
and 1-9 for PNG, these have been set to maximum. 

001 if (preg_match('/jpg|jpeg/’, $filetype[l])) 

{ 

002 imagejpeg($image_tn, null, 100); 

003 } 

004 if (preg_match(7png/', $filetype[l])){ 


005 imagepng($image_tn, null, 9); 

006 } 

007 imagedestroy($image_tn); 

Outputting our thumbnail 

It's finally time to output our thumbnail. Adding 
this code outside of our function will check the input 
image's extension, set the correct header and then 
output a thumbnail 100 x lOOpx. Add a test image to 
your working folder and then run your script in a 
browser to see the results. 

001 $input_file = 'test.jpg'; 

002 Sextension = explode(’.', $input_file); 
003 if (preg_match('/jpg|jpeg/', 
$extension[l])){ 

004 header('Content-Type: image/jpg'); 

005 } 

006 if (preg_match('/png/', $extension[l])){ 
007 header('Content-Type: image/png’); 

008 } 

009 

010 createThumbnail($input_file, 100, 100); 

Proportioned thumbnails 

While we’ve been able to create a square 
thumbnail, if we’re honest, it doesn’t look all that great. 
What we really want is a thumbnail that is still in the 
same resolution as the original. We can achieve this by 
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Create images with code using GD and PI-IP 


modifying our function slightly. First of all remove the 
$width and $height variables from the start of our 
function, the only variable we need to execute this 
command is our image. 

001 function createThumbnail($image) { 

Maximum values 

The next step we need to take is to add a 
maximum value for both height and width to our code, 
we'll then take the longest length of our image and 
scale our thumbnail so that it retains its resolution. The 
following code contains three IF statements. One is to 
deal with the height being the longest length, one is 
there to handle the width, and the third is for a square 
image (so the sides are equal). 

001 $max_width = 200; 

002 $max_height = 200; 

003 

004 if (SoriginalWidth > SoriginalHeight) { 

005 Swidth = $max_width; 

006 $height = SoriginalHeight*($max_ 
height/SoriginalWidth); 

007 } 

008 if ($originalWidth < SoriginalHeight) { 

009 Swidth = $originalWidth*($max_ 
width/SoriginalHeight); 

010 Sheight = $max_height; 

011 } 

012 if (SoriginalWidth == SoriginalHeight) { 
013 Swidth = $max_width; 

014 Sheight = $max_height; 

015 } 

Retain transparency 

* If you test your script with a PNG that features 
PNG transparency, you will notice that the alpha 
channel is replaced with black. In order to fix this little 
problem, we need to add three lines of code within our 
function to save the alpha channel. Add this after our 
$image_tn variable declaration. 

001 $image_tn = imagecreatetruecolor($width, 
Sheight); 

002 imagealphablending($image_tn, false); 

003 imagesavealpha($image_tn, true); 

004 imagealphablending($originalImage, true); 
005 imagecopyresampled($image_tn, 

Soriginailmage, 0, 0, 0, 0, Swidth, Sheight, 
SoriginalWidth, SoriginalHeight); 

Creating directories 

It’s all well and good creating a thumbnail on a 
temporary basis, but we need to save our thumbnails to 
make them more permanent. The first thing to do is 
create a directory that will hold our newly created 
thumbnail image. This IF statement will check to see if a 
folder called thumbnails already exists on our server; if it 
doesn't find one, it creates it. 


001 if(!is_dir(’thumbnails')) { 

002 mkdir(’thumbnails'); 

003 } 

Setting a filename 

This next section of code will create a file name 
for our newly created thumbnail, and pair it to our 
thumbnail directory. We are going to take the original 
filename, add an _tn to the end of it. then save it so it 
has the correct extension. Add this variable after our 
create directory code. 

001 $TN_filename = 

'thumbnails/'.$filetype[0].'_tn.'.$filetype[l]; 

Saving our thumbnail 

Now our thumbnail folder is set up and is 
writable, we can save our thumbnail to this directory. 
Our function can now act as a batch thumbnail tool if 
multiple images are passed to it via a foreach loop. Add 


the following code to the end of our function before the 
image is destroyed. 

001 imagejpeg($image_tn, $TN_filename, 100); 


Handling PNGs 

Run the code; you'll see our thumbnail has been 
created in the new thumbnail folder. We just need to 
wrap the last step in a final IF statement; this means we 
will be able to save our PNG thumbnail files, including 
the alpha channel. Replace the last step with this code. 

001 if (preg_match(‘/jpg|jpeg/’, $filetype[l])) 

{ 

002 imagejpeg($image_tn, $TN_filename, 100); 
003 } 

004 if (preg_match(‘/png/', $filetype[l])){ 

005 imagepng($image_tn, $TN_filename, 9); 

006 } 


Code library 

Exploring the GD functions 

Use this section to find out a bit more about various GD functions that we 
have covered in this tutorial. 


This is the base of all 
image creation-it 
creates a black work 
area, which we can 
then modify. 


Creates a clearer 
version of our 
thumbnail than the 
alternative 
imagecopyresized, 
though both take in 
similar variables. 


Used to both create 
and save images in 
JPG and PNG format. 
Saving is achieved by 
passing a filename 
into the function. 


This function allows 
us to carry over alpha 
channel data; it can 
also create blends. 


001 $image_tn = imagecreatetruecolor(Swidth, Sheight); 
002 imagealphablending($image_tn, false); 

003 imagesavealpha($image_tn, true); 

004 imagealphablending(Soriginallmage, true); 

005 imagecopyresampled($image_tn, Soriginallmage, 0, 0, 
Swidth, Sheight, SoriginalWidth, SoriginalHeight); 

006 

007 Sfiletype = explode('.', Simage); 

008 if (preg_match(’/jpg|jpeg/', $filetype[l])){ 

009 imagejpeg($image_tn, null, 100); 

010 } 

011 if (preg_match('/png/', $filetype[l])){ 

012 imagepng($image_tn, null, 9); 

013 } 

014 

015 if(!is_dir('thumbnails’)) { 

016 mkdir('thumbnails'); 

017 } 

018 

019 $TN_filename = 'thumbnails/'.Sfiletype[0]. 
tn.'.$filetype[l]; 

020 

021 if (preg_match('/jpg|jpeg/’, $filetype[l])){ 

» 022 imagejpeg($image_tn, $TN_filename, 100); 

023 } 

024 if (preg_match('/png/', $filetype[l])){ 

025 imagepng($image_tn, $TN_filename, 9); 

026 } 

027 
028 


0 , 0 , 


imagedestroy($image_tn); 
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Creating swipe-gesture content for webpages 



Creating 
swipe-gesture 
content for 
webpages 

Use swipe gestures in your websites to 
move between content giving your 
users bite-sized pieces of information 

tools I tecli I trends Dreamweaver 
expert Mark Shufflebottom 



s users now access our 
work on different devices, 
we are going to create a 
website based on swipe 
gestures for moving 
through page content. This 
might not be that useful for 
text-heavy sites, but will 
definitely work for visual sites 
such as portfolios. Given that 
we are going to be swiping through our content by 
dragging a finger left or right, that could pose a problem for 
the desktop. For this solution we could have used buttons, 
but instead we've opted to go for swiping with the mouse 
clicking and dragging left or right. To achieve this we’re 
using Matteo Spinelli's SwipeView open-source project as a 
starting point, which is available from cubiq.org/swipeview. 
This solves the important issue of loading up content on 
lower spec devices, and the project weighs in at a 
lightweight 1.5KB. Were going to custom format this and 
add in a menu for site functionality. We're also going to 
make the images responsive so they scale up slightly on 
larger-screened devices and the desktop, but scale down 
for lower sized screens to give optimal viewing to our users. 
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<Clockwise 
from top left > 

• The page is divided 
into two segments, 
one holds the 
heading while the 
remainder holds the 
content of the site. 
The yellow line is 
drawn to show this, 
but not visible in the 
final design 

• The content is 
added to the page as 
a series of touch and 
mouse responsive 
slides that can be 
swiped to flip through 
the content 

• Different content is 
added for each of the 
sections and passed 
in to the display slides 
via JavaScript objects 

• The content can be 
scrolled through on 
either a left of right 
basis simply by 
swiping the display. 
With a mouse the 
user clicks and drags 
either direction 


Getting started 

From the resource disc copy the start folder to 
your computer and open index.html in Dreamweaver. 
Now add the code shown below to the head section of 
the page. This tells the device not to scale the content, 
because we're going to produce a responsive design 
that will work across different screens. 

001 <meta name=”viewport” 

content=”width=device-width, initial-scale=l.0, 
user-scalable=no, minimum-scale=l.0, maximum- 
scaled. 0”> 

002 <meta name=”apple-mobile-web-app-capable” 
content=”yes”> 

003 <meta name=”apple-mobile-web-app-status- 
bar-style” content=”black”> 

Create the links 

Staying in the head section of the page, we then 
add a link to the typeface we are going to use. We also 
link up with our stylesheet, which is going to control the 
look of the page. Finally we add links to our two 
JavaScript libraries. The first is a self-contained link that 
handles the swiping, and the second one is jQuery for 
the drop menu. 


001 dink href='http://fonts.googleapis. 
com/css?family=Advent+Pro' rel='stylesheet' 
type=’text/css’> 

002 dink href="style.css" rel="stylesheet" 
type=’’text/css"> 

003 <script type="text/JavaScript" 
src=''swipeview. js"> 

</script> 

004 <script type="text/JavaScript" src=”http:// 
ajax.googleapis.com/ajax/libs/jquery/1.7/ 
jquery.min.js"> 

</script> 

Page structure 

Moving into the body section of the document 
we add the tags for the page structure. As you can see 
the header section just contains a page title and the 
wrapper will hold the swipe content. You will also notice 
that there is a sizable chunk of JavaScript code in the 
body section, which powers the swiping. 

001 <div id="header”xhl>Built By Bots</hlx/ 
div> 

002 <div id="wrapper"x/div> 


Swipe content 

Inside the JavaScript code in the body section, 
find the fifth line down, which should be empty, the 
previous line will end slides [‘ and the next line will have 
*]; This is where we will add the content for each of the 
swipeable slide contents in the code below. The square 
brackets denote that this is an array with JavaScript 
objects being placed inside. 

001 { img: 'images/botl.gif’, 

002 width: 420, height: 420, desc: 'Welcome, 
please swipe to explore'}, 

003 { img: 'images/john.gif’, 

004 width: 420, height: 472, desc: 'My name is 

John Smith’}, 

Remaining slides 

Add the next section of code which adds the 
next slides in the array. You can see that each slide 
contains a link to the image with the width and height 
properties being passed in. We also add the description 
in here - but we’re not adding a huge description 
because of the different screen sizes that this could 
potentially be displayed upon. 
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1 

Clockwise from top left> 

• The slides are responsive to the page width and snap into place so that a single swipe moves 
forward or back by one image 

• The menu is added to the display and, through CSS, positioned in the top-right corner. The menu 
remains hidden until clicked or tapped rather than rolled over 

• Here we can see the site running across a number of display sizes and devices with the swipe 
gestures working on all of them 


A 


Designing areas 


signing 
of content 


001 html, body { height:100%; } 

002 body { 

003 padding:0; margin:0; background:#333; 

004 -webkit-user-select:none; -webkit-text- 
size-adjust:none; 

005 color:#eee; font-family: ‘Advent Pro’, 
sans-serif; 

006 font-size:100%; } 

Style up the page 

Save the page and then open styles.css. Add the 
CSS for the HTML and body sections into the page 
here. Notice that we are preventing being able to select 
the page and adjusting the size, which is important for 
tablet devices. We also change to our custom typeface 
Advent Pro here for the whole page. 

001 html, body { height:100%; } 

002 body { 


Think of design for differing 
devices as trying to create 
areas of content rather than 
pixel-perfect designs, as with 
all the current screen ratios 
you will never succeed in 
. pixel perfection. _ 


003 padding:0; margin:0; background:#333; 

004 -webkit-user-select:none; -webkit-text- 
size-adjust:none; 

005 color:#eee; font-family: ‘Advent Pro’, 
sans-serif; 

006 font-size:100%; } 

Change the heading 

Next we change the heading to float over to the 
left of the page, the reason will become clear later on. 
We also add a small logo next to this as a background 


image. We therefore move the text across slightly so that 
we have some padding to the left of the text. The font 
size is also scaled down slightly so it isn't too big. 

001 hl{ 

002 margin-left: 10px; padding-left: 40px; 

003 float: left; font-size: 1.3em; 

004 text-shadow: 0 lpx 0 #000; 

005 background-image: url(images/mini-bot.gif); 
006 background-repeat: no-repeat; 

007 } 

Dividing the display 

Now we give our header the full width of the 
page, but ensure it has at least a minimum width and 
height to display its content. The wrapper is again set to 
have a width of 100% of the browser and a height of 
90%. The wrapper is the section where the page 
content is going to appear, so for that reason it is given 
the majority of the space. 
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001 #header {width: 100%; min-width:320px; min- 
height:10%; 

002 overflow:visible;} 

003 #wrapper { 

004 width:100%; min-width:320px; 

005 height:90%;} 

Setting the image width 

Now scroll to the selector '#swipeview-slider img' 
and add the following code into the curly brackets. This 
allows the image to scale with the display but stop 
scaling up when it reaches a maximum width of 480 
pixels. When it scales down below this, it will match the 
browser window. 

001 width:100%; 

002 max-width:480px; 

003 height: auto; 

Test the page 

If you save the CSS and test it in the browser, you 
will see that it is fully working, but we have no way of 
navigating to other pages, so let's build a space-saving 
drop menu. In index.html, add the following code into 
the div tag with the header id before its closing tag. 

001 <nav id="nav-wrap"> 

002 <div id="menu-icon">Menu</div> 

003 <ul id=”nav"> 

11 Menu content 

In the previous step we’ve added an unordered 
list, so we continue that with the list items as our links for 
the menu. The menu will display the menu text and the 
list will be hidden, but drop down as the user clicks the 
menu. This is useful in keeping a condensed layout for 
small screen devices. 

001 <li><a href="index.html">Home</ax/li> 

002 clixa href=”work.html">Work</ax/li> 

003 <lixa href="#">Facilities</ax/li> 

004 <lixa href="#”>Contact</ax/li> 

005 </ul> 

006 </nav> 

Document ready? 

In the head section at the top of the document 
add the following code in. This will check to see if the 
document is loaded and when it is, it will add a click 
event to the menu text. When this is clicked on it will 
use the slide-toggle jQuery function to drop the 
navigation menu into place. 

001 <script type=”text/JavaScript"> 

002 jQuery(document).ready(function($){ 

003 $("#menu-icon").on(”click", function(){ 

004 $("#nav").slideToggle(); 

005 $(this).toggleClass("active"); 

006 }); 

007 });</script> 


Style the menu 

Save the document and move to the style.css 
document. Add the CSS to the bottom of the document. 
This positions the entire navigation to the right, placing 
the logo on the left. The text is increased slightly in size 
to make it more visible in the menu. 

001 #nav-wrap { 

002 position absolute; 

003 top: 7px; right: 7px; 

004 font-size:1.2em;} 

Position the heading 

f The menu heading is moved over slightly so that 
an icon can be placed in the background of the div tag. 
The width and height of the blocks are set here, and 
when the cursor moves over this on a desktop device it 
changes to a pointer so the user knows that this 
element has navigational functionality. 

001 #menu-icon { 

002 color: #000; width: 150px; height: 30px; 

003 background: #ecebeb url(images/menu-icon, 
png) no-repeat 2px center; 

004 padding: 8px 10px 0 42px; 

005 cursor: pointer; display: block;} 

Change colour on rollover 

We want the menu to change it’s colour on 
rollover so that again it aids the user in thinking that this 
is a navigational part of the page. Here we set the hover 
and the active state so there are changes in colour to 
the background of the block element. The active state is 
when the menu is dropped down. 

001 #menu-icon:hover {background-color: 

#f8f8f8;} 

002 #menu-icon.active {background-color: #bbb;} 

Removing the menu items 

This positions the navigation absolutely so that it 
is exactly below the menu. The z-index is placed above 
other content on the page. The display is set to none 
because this is made visible when the user clicks or 
taps on the menu button. jQuery makes this visible by 
scrolling it out from under the menu. 

001 #nav { 

002 position: absolute; 

003 width: 192px; z-index: 10000; padding: 5px; 
004 background: #f8f8f8; 

005 display: none; } 

Style the list 

In the next block of code we set the list elements 
to have no bullets and to have a margin around each 
one. The text is set to have no underline as typically 
found on webpage links. The colour of each text 
element is also set at this point but will change on 
desktop computers that can rollover. 


001 #nav li { 

002 list-style-type: none; clear: both; 
003 float: none; margin: 5px 0 5px 10px;} 
004 #nav a, #nav ul a { 

005 font: inherit; text-decoration: none; 
006 background: none; display: inline; 
007 padding: 0; color: #666; 

008 border: none;} 



. Cross- 

W device testing 

p To test a lot of devices, you 
, need Adobe Shadow (labs. 
adobe.com/technologies/ 
shadow). It syncs devices to 
your desktop so you can see 
how sites perform across a 
variety of screens. 


L’ 


J 





Sliders on small 
screen devices 


There is a variety of differing sized 
devices that our users are accessing 
our content with. Each of these have 
different processing capabilities, from 
cheap Android tablets to expensive 
iPads. As this project uses Matteo 
Spinelli's SwipeView, he has solved 
the issue of loading the images on low 
capability devices. Some image 
galleries and slide show’s stack up the 
images in one long container, or even 
just holding them off the screen. 
Spinelli’s solution is to use one image 
on the screen and two either side so 
that they can be pulled in when 
swiped. Not only that but new content 
only loads once the movement has 
finished, so the download doesn’t 
interfere with the animation. There 
are never more than three images in 
memory and this makes it super 
responsive on smaller spec devices. 
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<Left> 

• Here the content is fully working and viewable on smaller 
screen devices such as smartphones and iPod touches 

</\bove> 

When the user clicks Menu it scrolls out below it and allows 
the user to navigate, which is ideal when space is tight on 
smaller displays 


Change of states 

We next add the hover states for desktop 
computers so that the text changes colour as the 
mouse rolls over the link in the menu list. A generic set 
of instructions are added for the unordered list element 
in the display. Save this document and test the design in 
your browser. You should be able to jump to the work 
page which is already completed. 

001 #nav a:hover, #nav ul a:hover { 

002 background: none; color: #000;} 

003 #nav ul { 

004 padding: 0; margin: 0; 

005 width: auto; position: static; 

006 display: block; border: none; 

007 background: inherit;} 

A small problem 

When viewing on tablet devices the display is 
good, because these have a reasonably large viewing 
area and we’re shrinking the image slightly. The 


problem is that on phone displays, the menu overlaps 
the heading, so let’s change that by adding a media 
selector in the bottom of the CSS document. 

001 @media only screen and (max-device-width: 
360px) { 

002 hl{ 

003 padding-left: 0; 

004 float: none; 

005 text-align:center;} 

Scale down the content 

In the previous step we set the hi tag to align in 
the center. Now we position the navigation below that 
and also scale the width of the image down to 60% - 
allowing it to fully display on the very small screen of 
mobile devices. Without doing too much, we have a 
responsive display. 

001 #nav-wrap { 

002 position:relative; float:none; 


003 margin-left: 60px; margin-top: -10px; 

004 font-size:1.2em;} 

005 #swipeview-slider img { width:60%;} 

Change the position 

Because some mobile devices have a navigation 
bar at the bottom of the display we are going to move 
the caption text of the image up the screen slightly to 
make it much easier to view. It shouldn’t make too much 
difference on other small screen devices. 

001 #swipeview-slider span (bottom:35px;} 

002 } 

Save and finish 

We are now finished with the CSS so save this 
and reload it in the browser to see it in action. If you 
have access to a tablet device it is well worth taking a 
look, because the swipe action really does enhance the 
experience of browsing through visual content that you 
would find in a portfolio site. 
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nderscores (or merely _s as it is 
also known) is a theme made by 
Automattic, the company behind 
WordPress itself. It's not intended 
to be a parent theme with which to 
base any number of child themes 
on. Instead, the whole point is to 
hack the code of underscore 
around to do your exact bidding. 

When you’re building sites for a 
client in WordPress, part of the initial labour is in 
stripping out all the functionality you don't need from 
an existing theme, underscores aims to provide the 
mere essentials, so you can get on with what makes 
your site unique. Back in issue 197 we looked at using 
the Roots WordPress theme (rootstheme.com), and 
underscores (underscores.me) follows a similar vein. 
The whole point is to give you what you do want and 
none of the niceties that aren't necessary and end up 
being stripped away. 

In this tutorial we'll grab the underscores theme, see 
what goodies it has, and how we can use them to 
potentially streamline your next WordPress build. 
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<Clock wise form top lef t> 

•Start with a plain vanilla WordPress 
install, either locally or on a remote server 

• Use the underscores.me website to 
generate a custom version of the 
underscores theme with the renaming 
already done 

• After activation not all the theme 
functions are available. It’s necessary to 
make some amends before Header and 
Theme Options are available 

•Out of the box underscores is more than 
a little plain looking, but that’s our job! 



Install WordPress 

If your hosting platform has a one-click install for 
WordPress, that’s usually the fastest and easiest option. 
Alternatively, upload the latest WordPress files manually, 
create a database and follow the five-minute install. If 
you are developing locally, create a new WordPress 
environment in your local LAMP/MAMP/WAMP stack. A 
quick shortcut if you have Shell (SSH) access is to 
download and unzip WordPress directly. 

001 mkdir underscores 
002 cd underscores 

003 wget http://wordpress.org/latest.tar.gz 
004 tar xfz latest.tar.gz 

Move WordPress into the root 

When WordPress is downloaded, after extraction 
from the ZIP file it's usually in its own WordPress folder. 
Let’s move the WordPress files into the root of our site’s 
folder (eg underscores). Either drag and drop through 
the Desktop or use the command line to move the 
WordPress files and then delete the empty WordPress 
folder and source ZIP file. Assuming you are currently in 
the underscores folder: 


001 cd wordpress 
002 mv * ../ 

003 cd .. 

004 rm -rf wordpress 
005 rm latest.tar.gz 

The easy way 

While it’s no use if you are cloning underscores 
direct to a server, when developing locally, the simplest 
way to create your own personalised version of the 
WordPress underscores theme is via underscores.me. 
Just enter your preferred theme naming parameters 
and it will create a custom ZIP file of underscores with 
all the files and functions correctly referenced for you. 

Download underscores (GitHub) 

The quickest way of using the theme on a server 
is by cloning everything directly from the GitHub repo. 
Open your command line environment, browse to the 
site folder and run the following commands. What we 
are doing is simply moving into the WordPress themes 
folder, and then copying the underscores theme from 
GitHub into our themes folder. Once this is all done, we 
will see a folder called _s in the themes folder. 


001 cd wp-content/themes 
002 git clone git://github.com/Automattic/_s. 
git 

Essential changes 

If using GitHub to get underscores, it’s necessary 
before you move on to do a little renaming of the 
theme. First of all, copy or rename the _s theme folder 
to something more suitable (we’re using underscores, 
theme). If you are still at the command line, you can use 
the command below. Once done, you’ll need to do a 
theme-wide find and replace. Find _s and replace with: 
‘underscores_theme’. Find:_s_ and replace with: 
underscores_theme_. Find: _s (notice the space before 
the underscore!) Replace with: underscores.theme 
(again with a space before). Be sure to use a name that 
won’t upset PHP functions (eg no hyphens). 

001 mv _s underscores_theme 

Find and replace 

A decent text editor should have a search and 
replace function that will let the scope be limited to the 
theme folder. However, if you are happy to use the 
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<Cloclcwise f l-oin top left> 

• underscores can use any of WordPress’s 
menus as the primary navigation. Just set 
the relevant menu as Primary Navigation 

• There’s support for custom headers in 
Underscores but you’ll need to enable it 
with some hacking 

• Modernizr isn’t included by default, 
though it’s relatively easy to remove the 
existing HTML5 shiv and use Modernizr’s 

• After enabling theme options, a sample 
page is included with typical input types 
for copying 


command line you can also use find and replace there. 
Here are examples of find and replace commands for 
renaming references to _s from the OS X command line 
(substitute references to underscores_theme with your 
own theme name). 

001 find . -type f -print0 | xargs -0 perl -pi 
-e "s/V_s\'/\'underscores_theme\'/g;" 

002 find . -type f -print0 | xargs -0 perl -pi 
-e "s/_s_/underscores_theme_/g ;" 

003 find . -type f -print0 | xargs -0 perl -pi 
-e "s/_s\b/Underscores_theme/g;” 

Activate Underscores 

In the WordPress Admin area, browse to 
Appearance>Themes and then click Activate under 
your theme name. Now take a look at the theme in the 
browser. Spartan indeed! First of all, you might want to 
amend the reference to the underscores theme in the 
footer. Open up footer.php in your editor of choice and 
amend or remove the code to suit. 



001 <?php printf( _( ’Theme: %l$s by 

%2$s.', '_underscores_theme' ), '.underscores, 
theme', '<a href="http://automattic.com/'' 
rel=''designer">Automattic</a>' ); ?> 

qq Amending style.css 

You might also want to amend the text in 
style.css to suit the needs of your customised theme 
design. Besides the WordPress theme information up at 
the top there, it’s organised with some reset and 
normalize styles first, and then a few essentia! styles for 
things like the navigation, images, entry metadata and 
the like. Remember that you have to alter the style.css 
info to suit your new theme. 

001 Theme Name: Underscores.theme 

002 Theme URI: https://github.com/Automattic/_s 

003 Author: Web Designer Magazine 

004 Author URI: http://webdesignermag.co.uk/ 

005 Description: This is a test theme for Web 

Designer Magazine based on _s! 

Basic layouts 

underscores has some very basic layout styles 
stored in the layouts folder. They are named according 
to their display. For example, content-sidebar.css should 
put the main content to the left and the sidebar on the 


right. For a quick structure, copy and paste the layout 
that best suits your needs into the bottom of the 
theme’s style.css file. Keep the comments in so you 
know where they came from. 

001 /* 

002 Theme Name: Underscores.theme 
003 Layout: Sidebar-Sidebar-Content 
004 */ 

005 

006 .site-content { 

007 float: right; 

008 margin: 0 0 0 -40%; 

009 width: 100%; 

010 } 

011 #content { 

012 margin: 0 0 0 40%; 

013 } 

014 #main .widget-area { 

015 float: left; 

016 overflow: hidden; 

017 width: 20%; 

018 } 

019 .site-footer { 

020 clear: both; 

021 width: 100%; 

022 } 
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Add example content 

If you don't have existing content, it can help to 
have some example content when building up the basic 
layout. There are a few WordPress plug-ins that do the 
job; we are adding WP Example Content. From the 
Admin screen, go to Plugins>Add New and search for 
WP Example Content. Install and activate the plug-in, 
then select the WP Example Content menu on the left 
and choose Add Bundle of Sample Posts. 

11 Create a menu 

underscores supports menus, so add one from 
the WordPress Admin (Appearance>Menus). Name it 
accordingly (we'd suggest 'Menu') and add in links from 
the left-side. In this instance we have selected all the 
pages made by the sample content, and nested them 
accordingly. By default this creates a basic drop-down 
menu from the nested ul elements, with lots of classes 
by default to aid styling: 

001 <ul class="sub-menu’’> 

002 <li id=”menu-item-29" class="menu- 
item menu-item-type-post_type menu-item- 
object-page menu-item-29”Xa href="http:// 
localhost:8888/?page_id=20">Grandchild Page</ 
ax/li> 

003 </ul> 

Responsive friendly 

By default, underscores only adds the width 
attribute (at 100%) to an image; perfect for responsive 
designs. Furthermore, the primary menu (that we set in 
step 11) converts to a menu button below a certain 
viewport width. By default, this is set to 600px. Amend 
the js/small-menu.js file in these two places. 

001 // Check viewport width on first load. 

002 if ( $( window ).width() < 450 ) 

003 $.fn.smallMenu(); 

004 // and: 

005 if ( browserWidth < 450 ) 

Template tags 

One set of helpers in the underscores theme 
is the custom template tags. The file for these can be 
found at inc/template-tags.php, and it includes 
functions for adding classes to things like post 
metadata, post navigation links, comments, and the like. 
Just edit the file to suit adding classes where needed for 
styling purposes. Here, we're adding a class of 
article-feedback to comments: 

001 <article id="comment-<?php comment_ID(); 

?>” class="comment article-feedback"> 

Custom headers 

Although not enabled by default underscores 
provides a custom header implementation. To enable it, 
first open the functions.php file and at the bottom of 
the file is a commented section. Uncomment the 


following section, save the file and then open inc/ 
custom-header.php. 

001 /** 

002 * Implement the Custom Header feature 
003 */ 

004 require( get_template_directory() . ’/inc/ 
custom-header.php’ ); 

Amending header.php 

At the top of the inc/custom-header.php file is 
a code snippet (starting around line 8). It begins <?php 
$header_image = get_header_image();. Copy this snippet 
and open header.php in the root of the theme folder, 
then copy in that snippet. We added it just after the 
opening <header id=''masthead” class=”site-header” 
role="banner”> tag. 

001 <?php $header_image = get_header_image(); 
002 if ( ! empty( $header_image ) ) { ?> 

003 <a href="<?php echo esc_url( home_url( 

7’ ) ); ?>” title="<?php echo esc_attr( 
get_bloginfo( ’name’, ’display’ ) ); ?>’’ 
rel="home’’> 

004 <img src="<?php header_image(); ?>" 
width="<?php echo get_custom_header()->width; 

?>" height=”<?php echo get_custom_header()- 
>height; ?>” alt=”" /> 

005 </a> 

006 <?php } // if ( ! empty( $header_image ) ) 
?> 

Including Modernizer 

As underscores uses HTML5 markup, it includes 
the ubiquitous HTML5 shiv for Internet Explorer 9 and 
below (referenced in the header.php file). However, if 
you need to provide fallbacks for different browser 
features you may prefer to include the HTML5 shiv with 
Modernizr (modernizr.com) instead. Save a version of 
Modernizr (including the shiv option) to the JS folder 
and strip this line from header.php: 

001 <!—[if It IE 9]> 

002 <script src=’’<?php echo get_template_ 
directory_uri(); ?>/js/html5.js” type=’’text/ 
javascript”x/script> 

003 <![endif]—> 

Enqueue Modernizr 

" Open the functions.php file and look for the 
section commented as Enqueue scripts and styles. 
Under the existing small-menu section, insert the 
following code. This loads Modernizes and provides a 
version of 2.6.1 for Modernizr (amend this to suit the 
version you are using). Note: if supporting IE8 you may 
want Modernizr to load in the head instead of the footer. 

001 wp_enqueue_script( ’modernizr’, get_ 
template_directory_uri() . ’/js/modernizr.js’, 
array( ’jquery’ ), ’2.6.1’, true ); 


Register the sidebar 

Now we have the code to display the output of 
the sidebar, we need to register it with WordPress. 
Adding the following code under the previous step will 
add the sidebar into the Widgets section of the 
WordPress admin. You can now drag the widget onto a 
sidebar and see the results. 

001 wp_register_ 
sidebar_widget( 

002 ‘author_box_ 
widget’, 

003 ‘Author Box’, 

004 ‘your_widget_display’, 

005 array( 

006 ‘description’ => ‘Display 

information about the blog author in your 
sidebar’ 

007 ) 

008 ); 

Enable theme options 

There are sample theme options to play with in 
underscores. Open the functions.php file, browse to the 
section commented as Custom Theme Options, 
uncomment the file load section as below and then 
open the Admin panel and head to Appearance>Theme 
Options. You’ll see that it ships with a few types 
(checkbox, text input, select options, radio buttons and 
a text area). 

001 /** 

002 * Custom Theme Options 
003 */ 

require( get_template_directory() . ’/inc/ 
theme-options/theme-options.php’ ); 

Amend Theme Options 

To use the theme options, open inc/theme- 
options/theme-options.php and amend the code to suit 
the options you want to provide. In this instance, we 
have amended the text input field to say Disclaimer Title 
(line 44) and the label (line 186). 

001 // line 44 

002 add_settings_field( ’sample_text_input', 

_( 'Disclaimer Title’, ’_underscores_theme’ ), 

’underscores_theme_settings_field_sample_text_ 
input’, ’theme_options’, ’general’ ); 

001 // line 186 

002 clabel class=’’description” for=’’sample- 
text-input”x?php _e( ’Disclaimer text input’, 
’_underscores_theme’ ); ?x/label> 

Amend the text area 

We also want to amend the text area field, so 
amend that to suit (lines 47 and 243 respectively). If you 
don’t want the other options to appear in the Admin 
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panel, simply comment out the relevant lines (around 
line 44 onwards). For example: 

001 /* add_settings_field( 'sample_select_ 

options', _( 'Sample Select Options', 

'_underscores_theme' ), 'underscores_theme_ 
settings_field_sample_select_options', ’theme_ 
options', ’general' ); 

002 add_settings_field( ’sample_radio_buttons' 

_( 'Sample Radio Buttons', ’.underscores. 

theme' ), 'underscores.theme.settings.field. 
sample.radio.buttons', 'theme.options', 
'general' );*/ 


UNDERSCORES IS BROUGHT 
TO YOU BY THESE FINE FOLKS 


i 


Using theme 
options 

Now we have set the theme 
options we need to 
display the content in our 
templates. Either create 
a new template or open 
an existing one (we are 
adding it in page.php). 

Then create the wrapping 
tags for your fields and insert 
them in the following manner, 
substituting the names for your 
own option fields: 


001 <?php 

002 $options = get_option('underscores_theme_ 
theme.options'); 

003 echo $options[’sample_text_input']; 

004 ?> 


Don’t be shy 

There’s no right or wrong 
when it comes to what you 
want to include in your 
underscore-based theme. 
The whole point is to rip 
out parts you don’t need, 
and add those you do. 



f5(2- 

Code library 

Adding your own body classes 

Out of the box, underscores provides lots of styling hooks. However, it’s 
easy to add additional classes 


Here, as in step 18, 
we’ve added a class 
to the body for when 
viewing a page. 


001 function underscores_theme_body_classes( $classes ) { 

002 // Adds a class of group-blog to blogs with more than 1 

published author 

003 if ( is_multi_author() ) { 

004 $classes[] = 'group-blog'; 

005 } 

006 // Adds a class if a page 
007 if ( is_page() ) { 

008 $classes[] = 'this-is-a-page'; 

009 } 

010 return Sclasses; 

011 } 

012 add_filter( 'body.class', 'underscores.theme.body.classes' ); 



’001 if (get.comments.number()!==0) { 
Perhapsyouwantto 002 $classes[] = ’yep-i-have-comments’; 
add a class if the post 003} 

received comments. 


Or maybe if a post 
belongs to a certain 
category? Add them 
one after another. 


001 function underscores_theme_body_classes( Sclasses ) { 

002 // Adds a class of group-blog to blogs with more than 1 

published author 

003 if ( is_multi_author() ) { 

004 $classes[] = 'group-blog'; 

005 } 

006 // Adds a class if a page 
007 if ( is_page() ) { 

008 $classes[] = 'this-is-a-page'; 

009 } 

010 if ( get.comments.numberO !==0 ) { 

011 $classes[] = 'yep-i-have-comments'; 

012 } 

013 if ( in_category('design') ) { 

014 $classes[] = 'a-design-post'; 

015 } 

016 return $classes; 

017 } 

018 add_filter( 'body.class', 'underscores.theme.body.classes' ); 
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Create a star- rating gallery system with jQuery 


Create a star- 



jQuery 

Image galleries don't have to be 
formulaic - with a smattering of jQuery 
you can make them more interesting 

tools I tecli I trends Dreamweaver, Photoshop 
expert Sam Hampton-Smith 




here are countless free image 
gallery scripts available on the 
web, whether it’s using the Flickr 
photostream, or downloading and 
installing a script directly on to 
your web server. 

These solutions are great for 
basic implementations, but they 
tend to look very similar once 
they’ve been deployed to your site. 
Instead of following the crowd and going for an 
off-the-shelf solution, why not use the power of jQuery 
to create your own unique image gallery? This tutorial 
shows you exactly how to do this, and although you’ll 
need an understanding of how JavaScript works, it’s 
surprisingly easy to achieve a polished result that will 
help make your website stand out from the identikit 
galleries that populate the world wide web. 

We’re going for a tablet-inspired theme to position 
our gallery on the page, but as you follow along you’ll 
get the skills necessary to theme your own gallery to 
suit your site. 


Sketch it out 

The first step when embarking on a project like 
this is to sketch out your ideas, getting a grip on what 
functionality you’d like to incorporate, how the user will 
interact with your gallery, and at least an idea of the 
visual approach you’d like to take. Spend five minutes 
with your sketch pad or a scrap of paper to work out 
the basics first! 

Create an XML file 

As we are already at the command line, we 
might as well set up our initial project while we are here. 
After entering the following command, a skeleton ZURB 
project will be set up. Ensure you are at the folder you 
store your local site builds (eg I use -/Sites) and run the 
following command where foundations is the name of 
the project/folder you want creating: 

001 <gallery> 

002 <image> 

003 <url>http://www.yourslte.com/imagel. 
jpg</url> 

004 <captior»Text to be shown alongside 
image</caption> 

005 <rating>3.0</rating> 

006 <numvotes>4</numvotes> 

007 <hasvoted>false</hasvoted> 

008 </image> 

009 </gallery> 

Add gallery HTML 

Now we've got our gallery source materials, it’s 
time to create the basic HTML document that will 
display our images. We’ve provided a simple start 


document on the resource disc you can use as a basis 
for this. Add the code to create the HTML elements we’ll 
need to display our gallery and star ratings. 

001 <div id="gallery"> 

002 <div id=''imageplaceholder”> 

003 

004 </div> 

005 <div id="imagelabel"> 

006 Rate our images! 

007 </div> 

008 <div id="instructions"> 

009 Images loading 

010 </div> 

011 <div id="rating"> 

012 <div id=”starbg"> 

013 <div id=”stars"> 

014 

015 </div> 

016 </div> 

017 </div> 

018 </div> 

Only include what you need 

Before we can show the images, we need to 
load our XML file using jQuery. If you don’t have it, grab 
jQuery from www.jquery.com and insert it at the top of 
your page, then create a script to hold your own jQuery 
and add the code shown to load the XML, ready for use 
by JavaScript. 

001 $(document).ready(function(){ 

002 

003 // Variables required by script 


004 

005 var currentimage; 

006 var score = 0; 

007 

008 var numvotes = 0; 

009 var starwidth = 0; 

010 

011 // Load Gallery XML file 

012 

013 $.ajax({ 

014 

015 url: 'gallery.xml', 

016 type: 'GET', 

017 

018 dataType: 'xml', 

019 

020 error: function(){ 

021 

022 alert('Error loading XML document'); 

023 }, 

024 

025 success: function(xmlData){ 

026 

027 // do something with xml 

028 

029 setupImages(xmlData); 

030 

031 } 

032 

033 }); 

034 

035 

036 // Remainder of code will go here 
037 }); 
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Grab the first image 


We've got a div in our design ready to hold our 
images, and we’ll display them as background images 
to ensure they fit in to the design (they’ll be cropped 
if they’re too big). We’ve also set aside an area for the 
image caption. Add the code below to grab the first 
image from the XML document and use it to display the 
image and caption in our placeholder divs. 

001 // Display images 
002 

003 function setupImages(xmlData) { 

004 // read xml and use it to populate page 

005 // Get first image 

006 

007 currentimage = $(xmlData). 
find("image: first"); 

008 // Fade in image after countdown 

009 showNewImage(); 

010 
011 
012 
013 
014 
015 } 

016 

017 

018 // Display the image, caption, rating and 

label 

019 


Animate in Photoshop 

Photoshop CS5 Extended and 
above includes a handy 
timeline feature that allows 
you to create movie-timelines 
directly inside Photoshop. This 
is handy for building loading 
animations amongst 
other things! 


020 function showNewImage() { 

021 

022 var image = S(currentimage).find("path"). 
text(); 

023 var caption = S(currentimage). 
find(”caption").text(); 

024 

025 // Fade out current image and fade in new 
image 
026 

027 $("#imageplaceholder”).animate({opacity:0>, 
500,function(){$(this).css({"backgroundImage":" 
url("+image+")"}).animate({opacity:1},500);}); 
028 // Add caption 
029 

030 $("#imagelabel").text(caption); 

031 // Check to see if voting has happened on 

this image 

032 

033 if ($(currentimage).find("hasvoted”). 
text()=="false") { 

034 


<Left> 

• The final gallery script uses a tablet 
metaphor to display the images. As the 
user moves their mouse over the image, 
a star rating widget is shown which 
allows them to place a vote for the image 
between one and five stars. The script 
only allows one vote per image, and 
animates the images in and out of view 


035 $("#instructions”).html("Click to rate 
this image"); 

036 } else { 

037 

038 $("#instructions").html("You previously 
rated this image"); 

039 } 

040 } 

Add paging buttons 

Our XML document has multiple images, so add 
the code below inside the setupImagesO function to 
create two anchors that will allow movement through 
the gallery to the previous and next image. We’ve 
already set up the CSS styles for these anchors, so the 
script will just add them to the page. 

001 // Add forward/prev buttons 
002 

003 var newhtml = "<a title=\"move to previous 
imageV’ id=\"prev\”x/a><a title=V'move to next 
imageV id=\"next\”x/a>"; 

004 

005 $("#containerinner").append(newhtml); 


07 


Make ‘em work 


When we click on the previous button the script 
needs to look at the XML document and grab the 
details for the previous image. It will then show this in 
place of the existing image. If there is no previous 
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image, it will show the last image, allowing the user to 
move through the gallery in a loop. The next button will 
work in the same way but in reverse. Add the code 
below to give this behaviour to the buttons. 

001 // Add click events to prev and next 

buttons 

002 

003 $("#prev").click(function(){ 

004 

005 var tmp = $(currentimage).prev(); 

006 

007 if ($(tmp).find("path").text()=='"') { 

008 

009 currentimage = S(xmlData). 
find("image:last"); 

010 } else { 

011 

012 currentimage = tmp; 

013 
014 } 

015 

016 showNewImage (); 

017 }); 

018 

019 $("#next").click(function(){ 

020 

021 var tmp = $(currentimage).next(); 


022 if ($(tmp) ,find(”path").text()="") { 

023 

024 currentimage = $(xmlData). 
find("image:first"); 

025 } else { 

026 

027 currentimage = tmp; 

028 
029 } 

030 

031 showNewImage(); 

032 

033 }); 

Rating scores 

* Each image has a rating score. We could have 
used separate graphics for each star in the score, but 
for ease we've created two graphics - one with empty 
stars and one with full stars. We'll overlay them so they 
match perfectly and adjust the width of the full stars div 
to only show a certain score. This is easiest to 
understand by looking at the diagram! 

Display the score 

Add the code below to convert the score from 
the XML sheet using the overlaid stars. The first star 
starts at 50px in from the left, and each star occupies 
40px of width, so we multiply the score by 40px and 


add 50px, then set the width of the stars' overlay to the 
result - hey presto, we have our score. 

001 // Display the image, caption, rating and 
label 
002 

function showNewImage() { 

003 

004 var image = $(currentimage).find("path"). 
text(); 

005 var caption = $(currentimage). 
find("caption").text(); 

006 

007 score = parseFloat($(currentimage). 
find("rating”).text()); 

008 

009 numvotes = parselnt($(currentimage). 
find("numvotes").text()); 

010 starwidth = parseInt(score*40)+50; 

011 

012 $("#stars").css({width:starwidth}); 

013 

014 // Fade out current image and fade in new 

image 

015 

016 $("#imageplaceholder”).animate({opacity:0}, 
500,function(){$(this).css({”backgroundImage":" 
url(”+image+”)”}).animate({opacity:l},500);}); 
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017 // Add caption 
018 

019 $("#imagelabel").text(caption); 

020 // Check to see if voting has happened on 
this image 
021 

022 if ($(currentimage).find(”hasvoted"). 
text()=="false") { 

023 

024 $(”#instructions").html("Click to rate 
this image"); 

025 } else { 

026 

027 $("#instructions”).html("You previously 
rated this image"); 

028 } 

029 } 

User scoring 

We can allow the user to submit their rating by 
clicking on the stars. As the user moves their mouse 
over the stars we want to illuminate the stars to indicate 
the score that will be submitted, so add the code below 
to do this. As we only want to allow whole numbers in 
the submitted score, we'll check where the mouse is 
and use that to illuminate whole stars. 

001 $("#starbg").mousemove(function(e){ 

002 // limit stars to move in whole stars 
003 // Get offset of element on page 
004 var offset = $(this).offset(); 

005 // get mouse position relative to stars 
006 var position = e.pageX - parselnt(offset. 
left); 

007 

008 var starwidth = (parseInt((positi 
on-50)/40)+l)*40+50; 

009 $("#stars").css({width:starwidth}); 

010 

011 }).mouseout(function(){ 

012 

013 // reset stars to current voting score 

014 

015 $("#stars").css({width:starwidth}); 

016 

017 }).click(function(){ 

018 newscore = parselnt($("#stars"). 
css("width")); 

019 

020 var tmpscore = 

(parseInt((newscore-50)/40)); 

021 $("#instructions”).html("Thanks for your 
rating!"); 

022 

023 }); 

Calculate the submitted score 

We need to use the same criteria to calculate the 
submitted score as we used to limit the display to whole 


stars. Add the code below to your script to check the 
width of the stars element and use that to calculate the 
score submitted by the user. 

001 StotalColumns: 24; 

002 SmobileTotalColumns: 8; 


011 if (S(currentimage).find(”hasvoted"). 
text()="false") { 

012 $("#stars").css({width:starwidth}); 

013 

014 } 

015 }),mouseout(function(){ 

016 


Do the math 

The score is the sum of all submitted votes 
divided by the number of votes. For ease, we'll round 
the score to 2 decimal places which prevents silly 
scores such as 3.1415926536! Add the code shown to 
calculate the new score and update the stars so they 
show it on screen. 

001 totalscore = score*numvotes; 

002 

003 totalscore = totalscore+tmpscore; 

004 

005 numvotes = numvotes + 1; 

006 


017 // reset stars to current voting score 
018 

019 $("#stars").css({width:starwidth}); 

020 

021 }).click(function(){ 

022 // if not previously voted, record vote 
023 if (S(currentimage).find(”hasvoted"). 
text()="false”) { 

024 

025 $(currentimage).find("hasvoted”). 
text(”true”); 

026 


score = parselnt((totalscore/ 
numvotes)*100)/100; 

007 

008 $(currentimage).find("rating"). 
text(score); 

009 

010 starwidth = parselnt(score*40)+50; 
011 

012 $("#stars").css({width:starwidth}); 


Prevent repeat 
voting 

We need to prevent the same 
user repeatedly voting for ^ 
the same image. There are 
many sophisticated ways 
of achieving this, but for 
our purposes we’re just 
going to keep a note of 
whether they’ve already 
voted during this session. 

Add the code shown to 
update the XML being held by 
JavaScript to indicate a vote has 
been cast. 



Animation 
with jQuery 

Animation in jQuery is 
queued. This means that 
you can assign many 
animations, but they will 
only happen once the 
previous animation has 
completed. This allows you 
to chain together 
effects easily. 


001 // deal with voting 

002 $(”#starbg").mousemove(function(e){ 

003 // limit stars to move in whole stars 
004 // Get offset of element on page 
005 var offset = $(this).offset(); 

006 // get mouse position relative to stars 
007 var position = e.pageX - parselnt(offset, 
left); 

008 

009 var starwidth = (parseInt((positi 
on-50)/40)+l)*40+50; 

010 


When a user has scored an image, 
we’ve updated our XML to reflect the 
updated count for votes and score. 
This only affects the locally loaded 
instance of XML that’s sitting in our 
JavaScript sandbox however, so once 
we've established that the score is 
valid and have added the result to the 
stars displayed, we need to update the 
original XML on the server to reflect 
the new score. We can do this by 
posting a message to a PHP script on 
the server that will update the XML. 
This is easily achieved using j Query’s 
$.post() function: 

001 $.post("updatexml.php", 

{ image: $(currentimage). 
find(”path").text(), rating: 
tmpscore } ); 

On the server you'll need a PHP script 
that can take the posted data and 
update the server version of the XML 
file based on the submitted values. 
We’ve included an example script on 
the resource disc for you. 
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027 newscore = parselnt($("#stars"). 

css(”width")); 

028 

029 var tmpscore = 

(parseInt((newscore-50)/40)); 

030 

031 totalscore = score*numvotes; 

032 

033 totalscore = totalscore+tmpscore; 

034 

035 numvotes = numvotes + 1; 

036 

037 score = parselnt((totalscore/ 
numvotes)*100)/100; 

038 $(currentimage).find(”rating”).text(score); 
039 

040 starwidth = parseInt(score*40)+50; 

041 

042 $("#stars").css({width:starwidth}); 

043 

044 $(''#instructions").html("Thanks for your 
rating!"); 

045 

046 } else { 

047 

048 $("#instructions").html("You've already 
rated this image!"); 

049 } 

050 }); 

Add some finesse 

We can add some final flourishes to our script 
and the visual effect by animating a few properties. Let’s 
start off by designing an animation to be shown while 
the images first load. Open up Photoshop and use the 
timeline to animate three discs from 0% to 100% 
Opacity. Save this as an animated GIF and add to your 
placeholder div as the background. 

Slide up text 

As well as the animation during loading, after 
each image has been shown we could animate the 
caption into place instead of simply allowing it to sit on 
top of the image. Add the code shown to do this for 
WebKit-based browsers, and apply the same approach 
for other browsers if desired. The code for this step can 
be found on the resource disc. 

Activate the animation 

The final thing we need to do is to add the active 
class to the image label once the new image has been 
shown. This will trigger the animation once. To make it 
trigger again, we need to also remove the class when 
switching between images. Add the code shown to 
complete the effect and the script. 

001 // Display the image, caption, rating and 

label 

002 function showNewImage() { 

003 var image = S(currentimage).find("path”). 


text(); 

004 var caption = $(currentimage). 
find("caption").text(); 

005 score = parseFloat($(currentimage). 
find("rating").text()); 

006 numvotes = parselnt($(currentimage). 
find(”numvotes").text()); 

007 starwidth = parseInt(score*40)+50; 

008 $("#stars").css({width:starwidth}); 

009 $("#imagelabel").removeClass("active”); 
010 // Fade out current image and fade in 

new image 

011 $(”#imageplaceholder"). 
animate({opacity:0},500, function(){ 

012 $(this).css({"backgroundImage":"url("+ima 
ge+”)”}).animate({opacity:l},500, function(){ 
013 $("#imagelabel”).addClass("active"); 

014 }); 

015 }); 

016 // Add caption 


017 $(”#imagelabel").text(caption); 

018 // Check to see if voting has happened 

on this image 

019 if ($(currentimage).find("hasvoted"). 
text()=="false”) { 

020 $("#instructions").html("Click to rate 

this image”); 

021 } else { 

022 $(”#instructions").html("You 

previously rated this image"); 

023 } 

024 } 

Test and review 

The final step is perhaps the most important of 
all - testing and reviewing your script obsessively. You 
need to make sure that the PHP is updating your XML 
correctly that images are loading and displaying as they 
should, and that all browsers render your gallery in the 
correct manner. 


Code library 

Make the ratings count 

The most complicated piece of the puzzle is how to get ratings to 
be recorded, and show the updated score for each image! 


As the mouse moves 
across the stars, we show 
the potential vote by 
animating the width of 
the stars div. 


When the mouse moves 
away from the stars, we 
reset the width of the 
stars div to show the 
current rating. 


When a click is recorded 
we work out the new 
score based on the 
number of votes and 
average score, then 
submit the vote to the 
server for a PHP script to 
update the XML file. 


001 $("#starbg").mousemove(function(e){ 

002 // limit stars to move in whole stars 
003 var offset = $(this).offset(); 

004 var position = e.pageX - parselnt(offset.left); 

005 var starwidth = (parseInt((position-50)/40)+l)*40+50; 
006 if (S(currentimage).find(“hasvoted”).text()==”false”) { 
007 $(“#stars”).css({width:starwidth}); 

008 } 

009 }).mouseout(function(){ 

010 // reset stars to current voting score 
011 $(“#stars”).css({width:starwidth}); 

012 }).click(function(){ 

013 // if not previously voted, record vote 

014 if ($(currentimage).find(“hasvoted”).text()==”false”) { 

015 $(currentimage).find(“hasvoted”).text(“true”); 

016 newscore = parselnt($(“#stars”),css(“width”)); 

017 var tmpscore = (parselnt((newscore-50)/40)); 

018 totalscore = score*numvotes; 

019 totalscore = totalscore+tmpscore; 

020 numvotes = numvotes + 1; 

021 score = parselnt((totalscore/numvotes)*100)/100; 

022 $(currentimage).find(“rating”).text(score); 

023 starwidth = parselnt(score*40)+50; 

024 $(“#stars”).css({width:starwidth}); 

025 tmppath = $(currentimage).find(“path”).text(); 

026 $.get(“updatexml.php”, { image: tmppath, rating: 
tmpscore } ); 

027 $(“#instructions”).html(“Thanks for your rating!”); 
028 } else { 

029 $(“#instructions”).html(“You’ve already rated this 
image!”); 
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Extend tags 
with CSS 
pseudo¬ 
elements 

Use CSS pseudo-elements to create 
individual styles within selected 
HTML tags 

tools I tecli I trends HTML. CSS 
expert Louis Lazaris 



hat do modern web 
developers care about? 

::::: Some of the most 

important things on the list 
of many developers today 
are performance, 
maintainability, and 
practicality. Any time you 
can utilise a coding 
technique that ranks highly 
in all those areas, you'd do 
extremely well to take full advantage of it. 

Due to the promotional efforts of some well-known 
blogger-developers, CSS pseudo-elements have taken the 
development world by storm. And the reason for this is that 
this particular CSS feature passes all the tests: It's fast, it's 
easy to code and maintain, and it's super-practical. 

Once you understand the potential of pseudo-elements, 
you'll find that they will become a staple in your CSS 
toolbox, and you’ll constantly be thinking of new ways to 
put them to use in your designs. 

If you haven’t seen pseudo-elements in action or have 
only briefly considered them for use in your projects, read 
on. This step-by-step tutorial is all about how we can use 
this unusual but useful CSS feature in our everyday work. 


The syntax 

Although there are other pseudo-elements, and 
there may very well be more added to the spec, this 
tutorial will focus on the two most commonly used 
ones. :before and :after. The code for a pseudo-element 
might look like this: 

001 .example:before { 


002 

content: 

003 

display: block; 

004 

position: absolute; 

005 

top: 10px; 

006 

left: 20px; 

007 

width: 50px; 

008 

height: 50px; 

009 

background: blue; 

010 } 



Content property 

The first thing you should notice about the code 
block in the previous step is the content property. That's 
what explicitly defines the pseudo-content that's 
inserted. The rest of the CSS in that declaration block 
helps to shape the element (dimensions, background 
colour, etc). 

Before and after 

The content property could include one or more 
characters, an image reference, or even a data URI. Any 
of those content choices could then be styled and 
would appear inside the targeted element - before any 
existing content. Conversely, if you used the :after 


pseudo-element, the inserted pseudo-element would 
appear after the element’s content. 

04 Print only 

If your website's content includes print-only 
styles (defined using the ©media rule), you can easily 
add pseudo-elements to help enhance the appearance 
of links in those stylesheets. For example, if someone 
prints a page that contains links, normally, the links will 
simply appear in print with a different colour, or as 
underlined text. 

001 a[href]:after { 

002 content: " (” attr(href) ") ";6 
003 } 

attrO function 

The previous example introduces the attrO 
function, used here in combination with quoted strings 
(in this case the set of parentheses). The attrO function 
tells the browser to insert the content of the href 
attribute of the targeted element. Any attribute can be 
targeted this way. Here's an example link, as it would 
appear in the HTML: 

001 <a href="http://www.webdesignermag. 
co.uk/">Web Designer Mag</a> 

Print styles 

This link would normally appear like this when 
displayed on the webpage, as hyperlinked text with no 
code showing at all: 


Web Designer Mag 


But with our print styles applied, it would look like this: 


We b Designer Mag (httpLV^^^^wcbdcsigncnnag.cQ.ukO 


Now every link that's printed will have its URL 
printed right next to it, all thanks to pseudo-element. 

Insert an Image Icon 

Pseudo-elements allow you to easily insert an 
icon to identify a particular element visually in some 
way. For example, many users find it irritating to click a 
link that points to a PDF document if there is no 
warning that it is in fact a PDF document. Using a 
pseudo-element, you can easily add a PDF icon to any 
PDF links, like this: 

001 a[href$=”.pdf"]:before { 

002 content: url(images/pdf-icon.png); 

003 margin-right: 5px; 

004 vertical-align: middle; } 

Attribute Selector 

This example in the previous step uses the ends 
with substring-matching attribute selector, which, 
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lid you ltk« to lt«rn today? 


CSS 


Q. 



HOT LINK 


ShopTalk Episode 33 — 

This week Dave and I were joined 
by WordPress mastermind Alex 
King. We mostly talk about 
WordPress stuff, including some 
tech stuff but also bigger issues 
like the business around it and 
motivation. Big thanks to D Conf 
and wironments for Humans for 
sponsoring. 


HOT LINK 


This Is Responsive. —► 

Brad Frost: 



CSS-Tricks is brou. 
Tree 1 : 5e, online 
design and develoi 
master each new t 


THE LODGE 


I area with a 
I screencast 
| covering th 


<Above and left> 

• CSS Tricks (css-trlcks.com) is one great go-to resource for more information 
about pseudo-elements 


although being part of CSS3, has excellent browser 
support going back to IE7. This selector tells the 
browser to place a PDF icon before all <a> elements 
whose href attribute ends with the string .pdf. 


njJ Download Whitepaper 


Word, text and email 

Simple, effective, and very easy to maintain. If 
you ever need to change the look of the icon, just 
update the image and all links will now include the new 
graphic. The CSS includes a few other properties to 
help with alignment and spacing. You can use the same 
technique to identify a Word document, a text file, an 
email link, or any other unorthodox URL. 

001 SmainColor: #944954 ; 

002 SsecondaryColor: complement(SmainColor); 
003 SalertColor: invert(SmainColor); 

Highlight code 

Developers who blog will often need to highlight 
their code to indicate whether it's PHP, CSS, JavaScript 
etc. If you're styling code on your own, or if you're using 
a code highlighter, you can add a pseudo-element that 


will visually identify the code block’s language without 
adding any extra markup. 

001 <pre data-code= ,, css"> 

002 example { 

003 width: 200px; 

004 height: 200px; 

005 } 

006 </pre> 

Data attributes 

Notice the use of the data-code attribute in the 
HTML. This is not a predefined attribute in the HTML 
spec, but rather, it’s a customisable attribute called a 
data-* attribute. This attribute can be pretty much 
whatever you want it to be, as long as it begins with 
'■data-". According to the spec, these custom attributes 
are intended to ‘store custom data private to the page 
or application, for which there are no more appropriate 
attributes or elements'. Check this link for an in-depth 
insight: ejohn.org/blog/html-5-data-attributes. 



Insert data code 

Now that our HTML <pre> element has a custom 
attribute with a value of css, we are going to want to do 
something with that. Let's grab that custom data using 
the :before pseudo-element along with the 
aforementioned attrQ function: 


001 

pre:before { 


002 

content: attr(data-code); 

003 

display: block; 


004 

background: hotpink; 


005 

color: white; 


006 

padding: 5px 10px; 


007 

margin: 0 -10px 10px 

-10px; 

008 

font-family: Arial; 


009 

border-bottom: solid 

lpx #666; 

010 

} 


13 

Style <pre> 



The code in the previous step styles the 
pseudo-element itself, adding a coloured background, 
padding, a bottom border, etc. Now we want to style the 
<pre> element. 

001 pre { 

002 padding: 0 10px 20px 10px; 

003 border: solid lpx #666; 

004 width: 400px; 

005 overflow: auto; 

006 } 
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Progressive Icons 

Fusee cqct teDus magna. Suspendisse luctus erat vitae nunc vanus tempus. 
Mauns lobortis omare faucibus 7 Vivamus lectus leo, feugiat et dictum tempus, 
susapit vitae tortor. Suspendisse poittitor porttitor aliquet. Abquam erat 
volutpat. Sed in metus iigula, sit amet luctus ante 7 Maecenas ora mauns, 
elenienluiu eu KjUus net, fniiyilld bed libeiu. Mauns nisi ipsuin, lacuna vel 
pliaieUa bK. amet, bceiensque nee nulla. Etiam dictum lulium egestas. Nulla 
inlet dum, aicu pulvmai luctus placet at, ipsum etub pulvmai udiu, vel luclub 
tellus ora eget nisi 7 Etiam nec nisi eros. Praesent mollis fehs ut metus posuere 
eget ullamcorper tortor eutsmodi 

Scd porta volutpat??.. ipsum, ut commodo vcht semper ctl Suspendisse 
potcnti. Curabitur locubs condimcntum dapibus. Donee masoa neque, vulputatc 
vitae matbs quis, sagitbs id eros. Cras elementum consequat Iigula non cursus. 
Donee mi elit, ultnees eget cursus at, tempor faucibus nunc. Sed dictum 
accumsan ipsum, eget tnsbque Iigula semper nec. In frtngilla arcu eget felts 
fermentum fermentum. Sed nec felts at est eensmod accumsan eget non arcu! 
Nam placerat ullamcorper elit ut uitnoes. 

Dens blan dit h ond ront auguo eu vulputato Maecenas adipisong porttitor 
libero: at lacubs emm luctus eu Cras blandit mbh et ante vanus sed consequat 
nsus mattis Nullam in velit metus, m aliquet magna? Abquam consectetur 

<Above> 

• The after element allows for the addition of images including icons 

• Why not visit the When can I use... (caniuse.com) website to check for 
browser compatibility? 
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Code block 

In step 13 we added a border, plus a set width 
and an automatic overflow value just in case the 
code lines are too long horizontally. The image below 
shows how our code block will look when it is viewed in 
the browser: 


.cxaaplc ( 

width: 200pxi 
height: 200px; 

) 


Content blocks 

With the CSS for the pseudo-element in place, 
all we have to do is include a data-code attribute in 
our HTML on any <pre> element, and the code will be 
visually marked using the text value of the attribute. 

This technique could be used to style all sorts of 
content blocks. But, keep in mind that this should not be 
a replacement for content that would normally appear 
in a heading tag (hi, h2, etc); this is purely for decorative 
purposes. So make sure your use of pseudo-elements 
doesn't affect the accessibility or keyword density of the 
page’s content. 

Use an Icon Font 

This next technique is similar to what did earlier 
when we inserted an image icon, but this time we’re 
using a technique to insert a font-based icon. Let’s say 


we had a list of folders and documents in a web 
application, and we wanted to identify folder names 
using a folder icon, and document names using a 
document icon. 

001 <ul> 

002 <li>Folder Number One 

003 <ul> 

004 <li>Document number one</li> 

005 <li>Document number two</li> 

006 </ul> 

007 </li> 

008 <li>Folder Number Two</li> 

009 <li>Folder Number Three</li> 

010 <li>Folder Number Four</li> 

011 <li>Folder Number Five</li> 

012 </ul> 

Style list 

With that HTML in place, which consists of an 
unordered list along with a nested unordered list, we 
can add our CSS: 

001 ul li: before { 

002 content: "1"; 

003 font-family: Wingdings; 

004 margin-right: 5px; 

005 } 

006 

007 ul ul li { 

008 margin-left: 30px; 


009} 

010 

011 ul ul li:before { 

012 content: "2"; 

013 font-family: Wingdings; 

014 } 

Licensed fonts 

Notice a couple of things, first, we’re using the 
Wingdings font for the two different pseudo-elements. 
Although many Windows machines come installed with 
this font, there’s no guarantee the users will have it on 
their systems. So before you choose such a font, make 
sure you use one with proper licensing, and preferably 
one that allows for @font-face embedding, so you’re 
guaranteed that it will show as you expect. 

001 <script type=''text/javascript”> 

002 $(window).load(function() { 

003 $('#featured').orbit({ 

004 animation: 'horizontal-slide', 

005 directionalNav: true, 

006 captions: false, 

007 pauseOnHover: false 

008 }); 

009 }); 

010 </script> 

Wingding font 

Next, notice that the content of the pseudo¬ 
elements is a character on the keyboard that matches 
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the particular Wingding icon were targeting. We’ve also 
added some margins to indent the list items. 

With this technique, we have a simple and easy way 
to maintain our decorative icons without adding any 
extra markup or messy background images. 

Another huge benefit to using fonts as icons is the 
fact that they can scale just like text and remain crisp 
without pixelating like image icons do. Here's how our 
folder list will display if the Wingdings font is available: 


Older browsers don’t support 
the double-colon syntax 


& Folder Number One 
® Document number one 

® Document number two 

& Folder Number Two 
£7 Folder Number Three 
Folder Number Four 


Code library 

CSS from our examples 

Our tutorial has demonstrated a number of ways to use pseudo-elements 
Here’s the complete code from the different steps 


Inserting a URL in a 
print stylesheet. 


001 a[href]:after { 

002 content: " (" attr(href) ") 
003 } 

004 


£D Folder Number Five 


Single colon 

You may have seen 
pseudo-elements expressed 
in two different ways: 

Using double-colon 
syntax, or the more 
common single-colon 
syntax. All other things 
being equal, there is no 
difference between the 
two styles. The only 
significant difference is that 
older browsers don't support 
the double-colon syntax. 




Style the first 
line of text 


m 

)rt 


The first-line element 
allows the first line of a 
paragraph to be styled 
independently. Add CSS 
styles to p:first-line {} to 
get the desired styling. 


001 .example:before { 

002 /* single-colon example, 
support */ 


which has good 


003 } 


Adding a PDF icon to 
PDF links. 


001 a[href$=".pdf"]:before { 

002 content: url(images/pdf-icon.png); 
003 margin-right: 5px; 

004 vertical-align: middle; 

005 } 


Highlighting code 
using data * attributes. 


001 pre:before { 

002 content: attr(data-code); 

003 display: block; 

004 background: hotpink; 

005 color: white; 

006 padding: 5px 10px; 

007 margin: 0 -10px 10px -10px; 

008 font-family: Arial; 

009 border-bottom: solid lpx #666; 

010 } 

011 

012 pre { 

013 padding: 0 10px 20px 10px; 

014 border: solid lpx #666; 

015 width: 400px; 

016 overflow: auto; 

017 } 


Double colon 

The double-colon syntax was introduced to help 
differentiate between pseudo-classes and pseudo¬ 
elements. So. if any new pseudo-elements are added to 
the spec, they will only be supported using the 
double-colon syntax. For more on this, see the following 
article on my website: www.impressivewebs.com/ 
before-after-css3 

001 .example::before { 

002 /* double-colon example, 
supported by newer browsers */ 

003 } 


* 001 ul li:before { 

Using icon fonts. 002 content: "1"; 

003 font-family: Wingdings; 

004 margin-right: 5px; 

005 } 

006 

007 ul ul li { 

008 margin-left: 30px; 

009 } 

010 

011 ul ul li:before { 

012 content: "2"; 

013 font-family: Wingdings; 

014 } 
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Need an inspirational site dissected? ) webdesigner@imagine-publishing.co.uk 


web workshop 


Creating a vibrant 
eCommerce site 



TECHNOLOGY 


Sell stuff, your way 

Shoplocket’s clever use of technology 
isn’t really visible from visiting the 


inspiration www.shoplocket.com 


website. Instead you have to use its 
product to understand what is so clever 
about its technology. We've all become 



Don’t leave the 
user hanging 

As the user scrolls down the 
page the last section gives a 
call to action so they are not 
left hanging at the bottom, 
with no further course but to 
scroll backup. 


Bold use of colour 

If you change the colour of your 
background for any reason on your 
site you are telling your visitor that 
this information is new and 
different to what has gone before. 
The site splits each section up to 
make it easy for people to process. 


Visual sf atements 

Notice how little text is 
on the entire page. The 
site is using simple 
messages broken down 
into sections with visual 
styling that enhances 
that message. 


Subtle patterns 

In the background of each section 
of the site is a very subtle noise 
pattern that just adds a touch of 
texture to the clean layout and 
design of the site. In some sections 
of colour this is mixed with a 
gradient to give subtle shadows. 


Immediate information 

When creating a website, 
particularly a new service, it’s 
important you tell your visitors 
exactly what you do in a 
nutshell. This will define 
exactly how long they stay on 
your site. 


hoplocket is a beautifully- 
designed site for a new 
service that aims to simplify 
selling online. The site itself is 
a showcase for what the 
Shoplocket service can do. and 
as such its primary focus is 
communication, letting the 
user know what they do and why it is important 
for them. If you are planning on selling online, 
then it is quite a lot of hassle getting secure 
servers in place and handling the credit card 


transactions - not to mention the issues with 
online security. By embedding an iframe shop 
in your page you can sell anything you want 
- a genius idea. The site itself uses a 
multicoloured homepage with striking 
bands of colour that communicate 
different parts of the concept. The 
design style is clean with strong 
use of icons, and a subtle 
texture used throughout the 
backgrounds to give contrast 
to the icons and typography. 


used to using YouTube and we've all 
spotted YouTube content on other sites. 
The power of YouTube was that you 
didn’t have to visit its site to take 
advantage of its power. That same 
philosophy is applied to selling online 
with Shoplocket. They use an iframe 
to embed a mini shop in anything 
you like, be it a blog, website or 
Facebook. The power is in its 
ability to enable anything to be 
sold in any place on the web. 


Sell anything — 
from anywhere 
in minutesj# 


J? | 




Connect with Facebook 




Enter your 


mail address 


ssword 


Choose a p 


Try it for free 


Lear n ro Code 

Workup 0 * 
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<comment> 

What our 
experts think 
of the site 


A strong use of colour 

"The bold use of colour on the homepage is important, because a change of 
colour is a change in meaning, so colour should always be changed when the 
message is changed. It can be difficult to use a lot of colour well, and most sites 
tend to use neutrals such as black, grey or white with a few complementary 
colours. It's impressive to see the range of colour used so effectively.” 

Mark Shufflebottom 



TECHNIQUE Creating the coloured bars 


Tiled image 

In Photoshop create a new document and make 
it 256 pixels in both width and height. We're going to 
create a noise pattern, but you can't do this on a 
transparent layer so make sure you create the 
document with a white background, then click OK to 
create the document. 


04 


Save as PNG 


Go to File>Save for Web and choose PNG-24 from 
the drop menu, making sure you've ticked the Transparency 
check box. Save the image out with the name ‘noise.png' to 
your site folder, and save the image in Photoshop in case 
you want to edit the opacity of the layer later on. 

PSSS55 



Add to yourCSS 


Style the content 

Go to the Filter menu and choose Noise>Add 
Noise. In the dialogue pop-up window add 60% as the 
amount and choose Gaussian and Monochromatic, 
then click OK to accept. This will fill the image with a 
random noise pattern. Now we have to make the white 
areas transparent. 



Select the black areas 


Create a div tag on the screen with the id bg. and 
then in the CSS part of your page add the CSS code shown 
below. The width and height are straightforward enough 
but the background image uses a combination of the tiled 
pattern placed on top of a CSS3 gradient placing the 
shadow at the top of the coloured band. 

001 #bg { 

002 

003 width: 100%; 

004 

005 height:400px; 

006 

007 background-image: url(noise.png), 
-WebKit-1inear-gradient(top, #f06d4b 
0%,#ff916f 200px); 

008 
009 } 


Go to the Select menu and choose Color Range. 
Click on one of the black spots of noise and set the 
Noise level to 45%. then click OK. Copy and paste this 
selection to a brand new layer and delete the lower 
layer. Now set the Transparency of the new layer to be 
10% in the layer panel. 



Test in the browser 

Save the page and test it in the browser. With the 
background-image CSS3 property the first image listed is 
always placed on top, and then subsequent listings are 
placed in order behind this. Using this we can combine the 
transparent image on top of the gradient. We’ve only shown 
the WebKit code for brevity. 




INSPIRATION 


Using shapes in 
your design 

Some of the images used on the site have 
been placed within circles. This is hardly 
ever done on the web because images are 
rectangular. However, using other geometric 
shapes as a frame can really add a unique 
and dynamic look to your design. This is also 
becoming much easier thanks to the use of 
transparent PNG images and their 
increasingly widespread support across 
contemporary browsers. 



Tech tip 

Curved shadows 

Some of the images used on the site have a 
curved drop shadow below them, which 
gives the impression that the edges are 
bending off the page. To get this effect, 
create a rectangle in Photoshop and 
duplicate the layer, filling it with black. Make 
this layer 50% Opacity and add a Gaussian 
Blur to it. Add a Liquify filter and in the 
window that opens check the Show 
Backdrop option. Now make your brush 
really large, 600px or similar. Push the 
bottom middle of the shadow upwards with 
the brush so that the shadow appears to 
bend. In the screenshot we are using a blue 
square as a guide. 
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Single-page 
navigation with 
HTML5 and 
JavaScript 

inspiration nationallgbtmuseum.org 


ne of the methods that 
designers have at times 
employed for a Flash- 
like user experience - 
without actually using 
Flash - over the past 
couple of years has been 
the simple single-page 
navigation approach. All the content of a website 
is loaded into one page, and rather than load new 


content when a button is clicked, the visible 
content area scrolls to the requested information 
in a linear fashion. 

This can be a great technique for achieving 
zero load times and a polished transition between 
different content elements, although it does 
require some forethought to avoid a slow-loading 
page, and overly simple design. Just because you 
opt for a single page layout, it doesn’t mean that 
you need to play it safe design-wise. 




<comment> 

What our 
experts think 
of the site 


Bold shape and colour brings design together 

“One of the striking features of the National LGBT Museum’s 
website is the bold use of colour and repeating patterns. Although 
each element of the design is distinct and different it all feels like 
the same site as instead of picking a single colour the designers 
have used form to tie the different areas together.” 

Sam Hampton-Smith 




TECHNIQUE 

Create a single¬ 
page layout 

Arrange your content 

Create your HTML document with 
multiple content areas. Position with 
absolute positioning, keeping all but the 
homepage outside the visible area of the 
page. Wrap a container <div> around all 
your content to act as a dolly for moving it 
around to become visible. Style each area 
to suit your design. The code for this step is 
on the resource disc. 

Create the navigation 

Add a navigation bar outside the 
container. Create a link to each different 
content area using the syntax <a 
h ref=”#contentareana me”>Content Na me</ 
a>. Each link should use the id name of the 
content area it points to - eg #homepage. 


#about-us, #contact-us etc. Arrange and 
style your navigation bar to suit, using fixed 
positioning and/or JavaScript to show and 
hide it if required. 

001 <nav> 

002 <ul> 

003 <a href=”#homepage”>Home</a> 
004 <a href=”#about-us”>About Us</ 
a> 

005 <a href=”#contact-us”>Contact 
Us</a> 

006 </ul> 

007 </nav> 

03 Create your script 

The basic approach to moving 
the visible content area around is to 
intercept a click on the navigation bar, 
read the content area that needs to be 
displayed and apply an animation to 
move the container into a position where 
the correct content is visible. Start off by 


Create a theme 

The National LGBT Museum’s 
website feels like a single design 
because the designers have used 
strong colours and geometric 
shapes throughout. Although 
each section has a different 
character, each reflects the 
overall design aesthetic, making 
it feel connected and coherent. 


downloading jQuery and including it in 
your page. Add a normal document. 
readyO function. 

001 $(document).ready(function(){ 
002 // when the document is ready 
to run code, this function will 
execute 
003 }); 

04 Add a click handler 

When a navigation button is 
clicked, we’ll get the target of the link and 
use it to work out how to position the 
container to show this content. We need to 
grab the href attribute of the clicked link, 


Right and left 

The left and right 
sides of the 
design move 
independently of 
each other as you 
navigate across 
the different pages 
within the website. 


Pre-loaded 

All the content is loaded 
into this single page, 
with different content 
areasappearing 
off-screen. As you click 
on the navigation, the 
relevant content area 
scrolls into view. 


then use the value of this to find the offset 
of the content area in question. The code 
for this step is on the resource disc. 

Animate into position 

We've now got the offset values, 
so we’ll adjust the left and top margins 
for the container to animate the position 
of the visible portion of the container 
such that the requested content is pulled 
into the visible area of the page. As long 
as your content area is the same size as 
the visible area, this will be automatic. 

001 // Animate the container into 
position 

002 $(“#container”).animate({ma 
rginLeft:contentleft, marginTop: 
contenttop},1000); 
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Single-page navigation with I-ITML5 ancl JavaScript 



Shapes and Navigation Scrolling Integration 

colour The navigation is Scrolling with a Social media and 

The site uses geometric persistent across all mouse-wheel compliance links are 

shapes and flat colour content areas, hiding works, and a gracefully incorporated 

to create a unique feel itself behind a JavaScript function into the header and 

for each content area, disclosure arrow for makes this elastic footer of the page, 

and signpost which easy access while to ensure the two keeping them accessible 

part of the site you’re allowing it to get out the parts of each page but out the way of the 

currently browsing. way when not needed. align perfectly. main content area. 



INSPIRATION 

National LGBT Museum 


The website uses the single-page technique to create a 
flowing feel. The page is split vertically, so as you 
navigate between sections the sides move 
independently of each other. The motion between 
pages is quick enough to lend a sense of urgency that 
is refreshing; designers often spend a great deal of time 
concerning themselves with user interaction, and lose 
sight of the goal to allow users to access the information 
on the page in the process! As well as the movement 
between content areas, the designers have employed 
beautiful geometric shapes and simple flat colour to 
create a unique feel for each content area, making it 
easy to identify which section of the website you’re in. 



HOUDQJUTI 



TECHNIQUE 

Design a 

repeating pattern 

The repeating geometric patterns used in the 
website are striking for their simplicity and bold 
use of colour. Creating your own repeating 
geometric patterns is simple with Photoshop. 



Oi Design your pattern 

Create a new document 120 x 120px 
in Photoshop. In order to make your pattern 
repeat seamlessly, you need to ensure that 
any elements bleeding over the right hand 
edge wrap to the left edge, top to bottom, 
and so on. Use the Grids and Guides feature 
to help ensure everything aligns. 




02 Define your pattern 

Once you’ve completed your pattern, 
select your entire canvas by choosing 
Select>AII or pressing Cmd/Ctrl+A. Choose 
Edit>Define Pattern. Give it a name and click 
OK to save it as a pattern in Photoshop. 


03 Test your pattern 

Create a new canvas inside 
Photoshop and use the Edit>Fill command 
to check that your pattern repeats 
successfully. Choose Pattern for fill type and 
select the pattern you created in step 2. If It 
isn’t seamless, return to step 2 and adjust to 
suit before testing again. 


web workshop 


79 



























































Get your site seen, or suggest a theme 

Tweet us with the URL or topic % @WebDesignerMag 


Elegant eCommerce 


S 

□111 


An online storefront can look as attractive as any 
inspirational site. Here we choose a selection of 
elegant and engaging eCommerce solutions. 



fontable 


HOW 

ROLL? 


Visual junkie 




Simon&Me 

T-shirts 
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Email us ft webdesigner@imagine-publishing.co.uk 
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Elegant eCommerce | 


01 

02 

03 

Left-hand page 


13 

14 

15 

Riglit-liaiid page 


04 

05 

06 

1. www.hardgraft.com 

2. www.fontable.it 

7. www.manoush.com 

8. www.radioflyer.com 

16 

17 

18 

13. wkstudio.bigcartel.com 

14. www.brevilleusa.com 

19. faucetface.com 

20. www.omgjeans.com 

07 

08 

09 

3. www.kookai.co.uk 

4. playbutton.com 

9. banditodesignco.bigcartel.com 

10. www.archiduchesse.com 

19 

20 

21 

15. shop.ugmonk.com 

16. www.trippin.com.ar 

21. littlesparrowtea.com 

22. www.unitedpixelworkers.com 

10 

11 

12 

5. www.49thparallelroasters.com 

6. www.many-hands.co 

11. shop.visualjunkie.no 

12. www.thehouseofties.com 

22 

23 

24 

17. www.madebyparachute.com 

18. www.bludot.com 

23. www.crumbs.com 

24. shop.boompa.ca 
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M apping and location-based 

services have, and continue to be, 
some of the most important 
features used on mobile devices 
today, be they smartphones or 
tablets. One of Google’s primary 
focuses is its wildly popular Google 
Maps services, which include 
everything from static maps to popular features like 
Street View and Google Places - which even taps into 
the social networking side of things. App developers 
can use the wide variety of Google Maps APIs to add 
mapping and location-based features to their mobile 
products easily since Google has created native 
libraries for use with Android and iOS, as well as 
JavaScript APIs that can be used to implement 
lightweight, cross-platform solutions. 

So let’s take a look at some of the most popular 
Google Maps APIs that mobile developers should 
consider leveraging within their apps. 

When it comes to leveraging mapping features 
within mobile apps, it pays to think beyond displaying 
a pin as a location on a map. Mapping features can 
benefit mobile apps far beyond that ‘X marks the 
spot’ mentality. Adding location awareness to your 



Source: Google, Inc 



applications gives them something vital: it gives 
them context. The user doesn’t want to know about 
every restaurant with a presence on the internet, 
they are much more interested in those shops in their 
immediate vicinity. The same is true for news or 
politics - even having app awareness of the seasonal 
differences between the Northern and Southern 
hemispheres can be used to provide an enriched 
user experience in your applications. 

So what kinds of apps can use mapping features? 
We would argue that there are ways to enhance just 
about any application, regardless of its type, with 
some sort of location awareness and mapping. The 
simplest case might be mapping up the ‘About the 
Developer’ content so users can learn more about 
your company. Apps that promote major brands 
might want to use maps to point users in the right 
direction to purchase their products (think Find Me 
Starbucks). Augmented reality (AR) apps use overlays 
on maps to show where nearby stuff is, be it 
geocaches or public conveniences. Games might 
even use real-world maps as the game environment 
(Parallel Kingdom is a household favourite for this 
type of mapping scenario). 

There are a number of different Google Maps APIs 
available to mobile developers. The services you will 
want to use depend upon several factors, most 
important of which are the mobile platforms you 
wish to support, the mapping features your 
application needs in order to function, and whether 
or not your applications or products are freely 
available or for purchase. 

Google provides native APIs for both the Android 
and iOS platforms, as well as a fully-featured 
JavaScript API that allows developers to create 
lightweight, cross-platform mapping solutions that 


work on a variety of mobile and non-mobile devices. 
In addition to the mapping features found in these 
core mapping APIs, Google provides special APIs for 
developers that want to access Google Places and 
Street View, for example. 


LEVERAGING GOOGLE’S NATIVE MAPPING APIs 

Native libraries are beneficial for developers that 
want to integrate mapping and location-based 



Whenever your application collects or # 

transmits information about the user, I 

whether it’s location information or N 

otherwise, it is up to you, the developer, to 
ensure that you are doing your utmost to protect 
that information. If your application collects or 
compiles user information itself, these practices 
should be clearly explained to the user. At minimum, 
your application should state its policies clearly in its 
end-user license agreement (EULA). When 
developers use the Google Maps APIs, they must 
agree to additional terms of service themselves, so 
you and your company should read these carefully 
to ensure applications use the services in ways 
allowed by Google. 
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The Starbucks mobile app for Android and iOS helps you find your local barista and much more 


features into their native mobile applications, 
without having to set up web-based user interface 
controls within your apps or work with web 
technologies. Native APIs tend to be faster and more 
efficient when implemented correctly. They also may 
include other, platform-specific features that are not 
available in the generic APIs, often for security 
reasons. The downside of working with 


operating systems have more custom code to create 
and maintain compared to a generic cross-platform 
implementation or shared library solutions. If you’re 
developing apps for Android or iOS devices, Google 
has native SDKs for both of these popular platforms. 

On the Android side, there is the Google Maps 
Android API. This API is available as an external 
library add-on that you can download through the 


Maps API developer and get a special API key for use 
within your application. Once you've downloaded the 
add-on and obtained your API key, you can link up 
the library to your Android project and start using 
the mapping classes. Core to this library is a special 
user interface component called MapView, which 
encapsulates many important mapping features and 
handles most of the interaction with the Google 
mapping services for you. You can find out more 
about the Google Maps Android API at developers. 
google.com/maps/documentation/android. 

For iOS, Apple provides the Map Kit Framework, 
currently backed by Google data (see Map Kit 
Framework in iOS 6). Much like the native Android 
APIs, developers can embed maps in their 
applications in addition to other fun mapping 
features like overlays and annotation. You can find 
out more about the Map Kit Framework for iOS at 
developer.apple.eom/library/ios/#documentation/ 
MapKit/Reference/MapKit_Framework_Reference/_ 
index.html. 

If you’re developing apps for multiple platforms, or 
mobile platforms other than Android and iOS, Google 
has a robust set of JavaScript APIs available for use. 
Google’s JavaScript libraries can be leveraged by 
many different operating systems, including mobile 
platforms. The web-based approach is often 
preferred for developers who want to create and 
maintain code that is compatible with multiple 
platforms. In this case, much of the application code 
is defined using the JavaScript APIs within a web 
control or browser on the device. There may or may 
not be a native application installed on the device. 



native APIs is that they are platform 
specific, and so developers who 
need to target multiple device 


Android SDK Manager and use within your 

applications. To use the native API, you 
"" will need to register as a Google 


Developers can simply add web controls to their 
existing native applications or take the mobile web 
application approach and exist entirely within the 
mobile browser. You can still use JavaScript APIs in a 


Parallel Kingdom is a game 
that uses the real-world map 
for its game space 


COMPETING MAPPING 
SERVICES 


GOOGLE ISN’T THE ONLY COMPANY 
THAT PROVIDES MAPPING APIs 
FOR USE BY MOBILE DEVELOPERS 


Google has provided the most complete 
mapping solution with native APIs for the 
most popular platforms like Android and 
iOS. However, mapping is a very 
competitive space, and while Google has 
led the pack, other companies have 
entered the fray as well. 

One thing that's common across the 
various mapping technologies is that 
they are generally free under certain 
conditions, but when used commercially, 


there are usually limits and fees. Mobile 
usage in terms of free vs paid apps are 
often exempted from the business fees, 
but read the fine print to be sure. 

Microsoft has SDKs available for its 
Bing mapping service for iOS and 
Android, as well as Windows Phone 7. 
See api.maps.nokia.com/en/mobile for 
more information. 
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Mapping the great indoors. A newer feature of Google Maps brings 
the technology inside malls and other spaces satellites cannot 
penetrate. Source: Google, Inc 
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native application by using a web control and 
enabling JavaScript for it. This allows the leveraging 
of some cross-platform mapping code while still 
having the great benefits of a native application. 

Either way, the Google Maps JavaScript API is a 
great way to embed Google Maps content in your 
own webpages and serve them up for users. The 
latest version of this API (Version 3), has been 
tailored in such a way that it suits both mobile 
devices and desktop computers. Again, developers 
must register and obtain an API Key from Google in 
order to use these APIs. 

Another important thing to note is that the 
JavaScript APIs have usage limits attached to them 
(currently 25,000 map loads per day). If your 
application(s) generate more loads than this on a 
regular basis you will need to purchase a quota 
upgrade or switch to the Google Maps API for 
Business, which is a paid-for service. You can find out 
more about the Google Maps JavaScript API v3 at 
developers.google.com/maps/documentation/ 
business/guide. 


OTHER MAPPING GOODIES FOR MOBILE 
MAPPING DEVELOPERS 

In addition to the core mapping features provided in 
the Android, iOS and JavaScript APIs, Google has 
created a number of speciality APIs that can greatly 
enhance certain types of mobile applications. The 
Google Places API enables developers to add 
proximity searches for business listings and other 
points of interest. For example, a car mileage 
tracking app could include a feature for finding a 
nearby petrol station or service centre. Developers 
can query the Google Places service for nearby 
places or events by category, display loads of 
information about a specific place (address, phone 
number, hours, user reviews, etc). There’s even a 
Google Developer Challenge going on right now until 
October 31 2012, for app developers who want to 
leverage the Google Places API in new and exciting 
ways. Find out more at developers.google.com/ 
places/challenge. 

Similarly, you can use the Google Street View API 
to display and manipulate the panoramic street-level 
images that represent locations on the map in your 
apps as well. Street View coverage varies throughout 
the world, depending on the local take on privacy 
concerns. We’ve seen the Street View APIs used for 


Unfortunately, the short and long answer to the 
first question is that you’ll need to read up on any 
mapping API changes using your Apple developer 
account. Until the details of the changes are 
released to the public, any changes are under 
nondisclosure agreements every registered Apple 
developer agrees to. Also, prerelease technologies 
are not set in stone; they are subject to change. 

An alternate solution to embedding maps using 
the iOS Map Kit framework is to embed an HTML 
view and use Google’s JavaScript APIs instead. The 
change would also be a lot of work for existing 
applications. You’ll need to test your applications 
on iOS 6 to make sure the data is acceptable, and 
the differences in what maps look like between 
platforms don’t negatively impact the user 
experience you're trying to provide. 


everything from real estate research to marathon 
running route scouting to silly games like Streetview 
Zombie Apocalypse (wonder-tonic.com/zomble), 
where you can run around your own neighbourhood 
and try to avoid zombies. 

LOCATION, LOCATION, LOCATION 

Simply by their definition, mobile apps, regardless of 
their purpose, are often sensitive to the user’s 
location. Some applications may only want to 
consider very lightweight integration with mapping 
services, while others will leverage mapping and the 
user’s location data in a much deeper, more 
integrated fashion. Google’s mapping APIs are still the 
most sophisticated and fully-featured services 
available to mobile developers, regardless of which 
mobile platforms they target. 
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Build a web app with Groovy and Grails 


Buildawebapp 
with Groovy 
and Grails 

Build a simple Java web application 
powered by Groovy and the Grails 
Model View Controller framework 

tools I tecli I trends Grails, Groovy/Grails Tool Suite 
experts Matt Gifford 



G rails is an open-source framework 
that uses the MVC (Model View 
Controller) approach to create 
dynamic webapps on a Java 
platform using Groovy. It’s easy to 
learn and offers many tools and 
features to assist you. If you are new 
to Groovy or Grails, be not afeard. 
After following this guide you will be well on your way to 
creating powerful, dynamic Java webapps with minimal 
fuss. In this tutorial we will ease into the world of Grails 
by building a very simple application that will allow 
users to add, edit, and delete entries in a task list. We will 
look at creating the domain classes, controllers and 
view pages; as well as using constraints to enforce data 
validation on our database model objects. We'll also use 
Grails’ powerful tools to generate the database schema 
and a portion of the application for us, which helps to 
streamline how we work and achieve results much 
faster than with other languages. 


Oi Install Grails IDE 

You could code our complete Grails app using a command line 
interface and any text editor. However, dedicated tools like the Groovy/Grails 
Tool Suite IDE, based on the Eclipse framework, offers built-in Grails helper 
tools as well as server management and debugging. Download the open- 
source application and install. It will also install the latest version of Grails for 
you.www.springsource.org/downloads/sts-ggts. 

Create new application 

Select File>New>Grails Project from the main menu in the IDE. This will 
open up the new project wizard. Enter a memorable name for your 
application. In this example we’ll use TaskManager as the name. Accept all 
defaults you are shown and click Finish to proceed. The project structure will 
be created for you. 

03 Amend config 

Open up conf/Config.groovy in the IDE. This is one of a number of 
configuration files. Here we will change the value of the first property, named 
grails.project.groupld. By default this will use the project name that already 
exists, but we’ll define a custom package name for use with our objects, 
domain packages and controllers. 

001 grails.project.groupld = "org.example.taskmanager” 

Run application 

Start up the server and make sure we can reach the Grails 
implementation. Right-click the project and select Run As>Grails Command 
(run-app). By default, the application will run in the development environment. 
Once complete, visit the URL shown in the console panel view to see the 
default Grails landing page. 

001 http://localhost:8080/TaskManager/ 

Create Controller 

Let’s get cracking and create our first controller. Right-click on the 
project in the left-hand pane within the IDE. Select New>Controller from the 
context menu. Ensure the application name listed is correct, and enter ’Home’ 


as the controller name. This will generate the controller for you with a default 
action called index. 

001 package org.example.taskmanager 
002 class HomeController { 

003 

004 def index() { } 

005 } 

Create index page 

Grails uses naming conventions to define the transactions and 
processes around the MVC framework. With the default index action, we now 
need to create a view page with the same name. Right-click the views/home 
directory and select New>File from the menu. Call the file ‘index.gsp’ and click 
Finish to complete the process. 

Passing data 

We’ll send some basic data from the controller for display in the 
view. Open HomeController.groovy, and within the index action define 
two variables. The first is a String, while the second is a Date object. Send 
the value of these variables as a mapped object with key/value pairs. 

001 def index() { 

002 

003 def String header = 'Welcome to the Grails introduction app' 
004 def Date date = new Date() 

005 

006 [''header”: header, "date": date] 

007 
008 } 

Output variables 

Open home/index.gsp, into which we’ll add the code to display the 
variables sent from the controller. Grails variables are wrapped in curly 
brackets and are prepended with a dollar sign. To format the date object into a 
string, well use one of the many tags included in the Grails library, 
g:formatDate, and define the format for the date. 
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<Top left, cloclcwise > 

• The Groovy/Grails Tool Suite IDE by SpringSource has details on Grails support and 
code hinting 

• The new project wizard gives you the option to select a different version of Grails, should 
you wish to do so 

• Having launched the local development server, you will see the default Grails landing page 

• The Groovy/Grails Tool Suite IDE also offers a Grails command wizard to help you execute 
framework commands 


001 <hl>${header}</hl> 

002 

003 <p>The current date is <g:formatDate format="dd MMMM, yyyy" 
date="${date}"/x/p> 

Create domain/model 

Grails uses the Model View Controller paradigm. Domain classes are 
the models in this scenario, and they represent a persistent entity that is 
mapped onto an underlying database table. Right-click the project and select 
New>Domain Class from the context menu. Set the name of the new model 
as ‘Task’ and click Finish to generate the skeleton object. 

001 package org.example.taskmanager 
002 

003 class Task { 

004 

005 static constraints = { 

006 } 

007 } 

Set properties 

As the domain class we created in the last step represents a database 
table, we now need to define the columns within that table, which we can 
do by setting the property names and data types within the class itself. We 
don't have to worry about the creation of the database tables, as Grails will 
handle those for us. Well create two String variables and one Date property 
object for our tasks. 


001 import java.util.Date; 

002 

003 class Task { 

004 

005 String title 
006 String description 
007 Date dueDate 

Constraints 

With the properties defined, we can add constraints to the domain 
class to help validate the values being passed into the class and stored in the 
database, as well as to help Grails define the correct column properties when 
generating the database schema. Here we want to ensure both string values 
are provided, and that the title will have a minimum of three characters. 

001 static constraints = { 

002 title size: 3..100, blank: false 

003 description maxSize: 1000, blank: false 

004 } 

Generate all 

Grails can really enhance the development process with some fantastic 
built-in tools. Well use a feature known as Scaffolding to automatically create 
the controller, associated unit tests and the view pages that will interact with 
our Task domain class. To do so, right-click and select Grails Tools>Open Grails 
Command Prompt and enter the following command. 

001 grails> generate-all org.example.taskmanager.Task 
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Use Scaffolding 

The Scaffolding tool is a 
great way to create 
features to manage the 
full database interaction. 
The generated code also 
acts as a good resource 
on how to create pages 
manually. 


<Top left, <:locliwise> 

• The interface for task 
management generated by 
the Scaffolding tool even 
converts Date objects into 
selectable form elements 

• Our test data, added in via 
the Bootstrap configuration 
file, has been stored in the 
database for us 

• The DbConsole tool gives 
you a user-friendly interface 
to interact with your 
application’s datasource 
and content 

• There are a large number of 
plug-ins available to use 
within your Grails 
applications that cater for all 
manner of requirements 



008 } 

009 

010 "/"(controller: "home", action: "index”) 
011 "500"(view:'/error') 

012 } 

013 } 


Test data 

To save entering test data every time we run the application, we can 


Generated pages 

Following the generate-all command, visit to the root of your 
application in the browser (localhost:8080/TaskManager) and click through to 
the TaskController. You will see that Grails has generated all of the views 
required to list, add, edit and delete items from the database. It has done a lot 
of work for you in seconds. 

Homeward bound 

We can change routes and URL mappings in Grails to point towards 
specific controllers and actions. We want to view the home/index.gsp page 
whenever we view the root URL instead of the default Grails page. To do so, 
open up config/UrlMappings.groovy and change the root mapping to point to 
the home controller and the index action. 

001 class UrlMappings { 

002 

003 static mappings = { 

004 "/$controller/$action?/$id?"{ 

005 constraints { 

006 // apply constraints here 

007 } 


set default data that will automatically populate the database whenever we 
start the server. Open conf/BootStrap.groovy and set the values for the default 
records for testing purposes within the initO block. We first check to make sure 
the test data does not already exist using the countO method. 

001 def init = { servletContext -> 

002 // Check whether the test data already exists. 

003 if (!Task.count()) { 

004 new Task(title: "Drink Coffee", description: "Coffee., 
drink lots of it.”, dueDate: new Date()).save(failOnError: true) 
005 new Task(title: "Create Something Awesome", description: 
"Build an amazing application (or a treehouse)", dueDate: new 
Date()).save(failOnError: true) 

006 } 

007 } 

Home controller 

We want to be able to view a list of all Task entities from the 
homepage. While we could set another URL Mapping to point the root of the 
application to the Task controller index action, well instead revise controllers/ 
HomeController.groovy and set the relevant variables to read from the 
database and pass them through to the view. 
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Build a web app with Groovy and Grails 


001 def index(Integer max) { 

002 

003 params.max = Math.min(max ?: 10, 100) 

004 

005 def String header = 'Welcome to the Grails introduction app' 
006 def Date date = new Date() 

007 

008 [tasklnstanceList: Task.list(params), tasklnstanceTotal: Task. 
count(), "header": header, "date": date] 

009 
010 } 

Loop over data 

Open views/home/index.gsp. Beneath the existing code we’ll add a 
conditional statement to check for the existence of records returned to us. If 
we have data, we’ll use another built-in tag. g:each, to loop over the collection 
and create a list item for each. We’ll also define a link to allow the user to edit 
the task and generate pagination links. The code for this step can be found on 
the resource disc. 

Create link 

From the homepage, we also want to give our users a link to allow them 
to add new tasks to the database. We’ll use the gzlink tag once more to 
generate the full HTML anchor tag. This will send them to the create action in 
the task controller. Place this at the bottom of the index.gsp file outside of the 
closing g:if tag. 

001 <p> 

002 <g:link controller^'task" action="create">Create new taskc/ 
g:link> 

003 </p> 

Persistent database 

By default, the Grails development environment uses a database that is 
persisted in memory and is recreated with every server restart. We can alter 
this behavior by changing a configuration property. Open conf/DataSource. 
groovy and change the development datasource url, removing the mem: 
string from the value and changing the dbCreate property to ’update’. 

001 environments { 

002 development { 

003 dataSource { 

004 dbCreate = "update" // one of 'create', 'create- 

drop', 'update', 'validate', " 

005 url = ”jdbc:h2:devDb;MVCC=TRUE;LOCK_TIMEOUT=10000" 

006 } 

007 } 

DbConsoletool 

Grails provides you with an incredibly easy way to interact with the 
databases. Log in to the DbConsole tool, making sure the JDBC URL value 
matches that set in the DataSource.groovy configuration file. The console is 
available via the URL on the local server, and you can query, view, amend and 
manage the database content directly from here. Iocalhost:8080/ 
TaskManager/DbConsole. 

001 initialize: function() { 

002 this.model.on('remove', this.unrender, this); 

003 H ... 

004 }, 


005 II ... 

006 unrender: function() { 

007 this.$el.remove(); 

008 } 

Change port 

By default, the development environment server will run on port 8080. 
If for any reason you have something else running on that port or want to 
change it to something more memorable, you can set a permanent property 
in conf/BuildConfig.groovy, specifying the preferred port number to use. Add 
this line to the top of that configuration file. The code for this step can be 
found on the resource disc. 

Highly extensible 

Grails can be extended and enhanced using plug-ins. You can create 
your own. but have a look at the list of those available to use via the Grails 
Plugin Manager, accessible from the Grails Tools context menu. URL 
Shortening. Social Networks and framework tools are just some of those 
available to download and implement into your applications. 


yT ORMand ^v. 
f Hibernate 

Grails has an Object 
Relational Mapping layer 
built on top of Hibernate, 
which makes the tasks of 
managing database access 
and persistent objects an 
incredibly simple process. 



A powerful IDE to assist 
your workflow 


An IDE can be an incredibly personal tool, as we spend a lot 
of time using it. We want it to do everything we need with 
minimal fuss and as quickly, cleanly and easily as possible. 
The more streamlined we can make our development 
process, the easier it makes building an application and the 
simpler our working lives can be. 

The GGTS IDE provides us with a clean, simple layout 
packed full of features and functions to interact with the 
Grails framework at a command level. For anyone not fully 
comfortable with command line development, GGTS will 
handle this communication for you, as everything you need 
is available from a menu option. The tool also includes 
detailed (and very useful) step debugging tools to watch and 
debug the application as it is running. 


tutorials 


91 














Deploy a live site using Git 


Deploy a live 
site using Git 

Learn how to deploy sites using the 
Git version control system, allowing 
for easy branching and rollbacks 

tools I tecli I trends Git, GitHub.com, Terminal, SSH access to the live/ 
dev/staging server expert Kieron Howard 



T here are many version control 
systems, such as SVN, Aegis and 
Mercurial. One of the newer, but very 
popular choices, is Git. Git was 
developed by Linus Torvalds who 
created the Linux kernel. While it's 
possible to use Git purely locally, or 
over a LAN, its also great for 
deploying changes to a live or 
development website. This tutorial will assume a basic 
knowledge of how Git works, but will take you through all 
the steps needed to set up a local GitHub to server 
workflow allowing multiple users to collaborate, track 
changes and make branches as they see fit. Git also 
makes it very easy to roll back any changes you have 
made, in case any mistakes are made. Using GitHub you 
can easily see what changes each collaborator has made, 
and when, which is incredibly helpful when bug fixing. Git 
recently introduced a new GUI interface for OS X and 
Windows, which makes using Git even easier to designers 
and developers, although this tutorial will focus on using 
the command line, as it's more powerful. 


Sign up for Git 

The first thing you will need is a Git account. Signing up for public 
repositories is free. If you want to keep them private you'll need a paid 
account, but the rates are very reasonable. Go to: github.com/plans. 


pthub 

Sign up tor GflHub 



Install Git 

To install Git on Linux enter 'sudo apt-get install git’. For OS X you can 
download binaries from: bit.ly/xCCrm, and Windows from here: bit.ly/P3owfw 
- double-click on the EXE or DMG to install. 

Complete install 

Depending on your operating system, the install process may be a 
little different, but shouldn’t take too long. There is a GUI for GitHub available, 
but well be using the command line mostly. To test the install, in OS X or Linux 
open Terminal/Console, on Windows CMD, and enter ‘git’. You should see the 
help messages. 

04 SSH Keys 

We need to make sure that our server is secure and that only we can 
make changes to it. For that we use a special file - an SSH key. SSH stands for 
Secure Shell, and using a key file is more secure than a simple password. 


Create Git key 

In Terminal enter the command below, obviously replacing the email 
with the one you used to sign up for your Git account. You will be prompted 
on a location for the key: hit Enter to use default, and an optional passphrase. 
Once done, the key will be made, along with a fingerprint. 

001 ssh-keygen -t rsa -C "kieron@kieron.com" 

Copy the keyfile 

We then need to copy the keyfile to our clipboard. You can do this 
manually if you want, or just enter the following into Terminal. If you put your 
key elsewhere, replace the ~/.ssh/id_rsa.pub part with its location. Once you've 
run that, you’re ready to add it to GitHub. 

001 pbcopy < ~/.ssh/id_rsa.pub 

Git account settings 

In your browser go to github.com, and then click on Account Settings 
in the top-right corner. Then in the left-hand column click on the SSH Key tab. 
Click Add SSH Key and give it a name, then paste the key into the key area. 
Then add the key. 
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Test out SSH access 

Now we can test out our SSH access. In Terminal enter the code below, 
and then press Y and Enter to add the RSA key to your known hosts. You 
should then see a message similar to Hi kiksy! You've successfully 
authenticated, but GitHub does not provide shell access. 

001 ssh -T git@GitHub.com 

Create a repository 

Back on github.com click on New Repository to make a new repo. 
Enter in a name and description and choose whether to make it public or 
private. For commercial development it might be wise to keep it private, but 
for personal projects or ones you wish for others to collaborate on, choosing 
to go public is a great option. 

Clone repo to local 

Now we want to clone that empty repo to our local machine, which 
can be done by entering the command below. Replace the kiksy part with 
your own username, and then the my-dev-repo with the name of the repo we 
just made, not forgetting to add the .git. 

001 git clone git@GitHub.com:kiksy/ HYPERLINK "https://GitHub. 
com/kiksy/my-dev-repo"my-dev-repo.git 


Create project 

You should then see the repo copied to your home directory, ready to 
be worked on. By default it will only contain a readme, and a gitignore if you 
choose to add that. Create a simple index.html page to test out the 
deployment process. We will then add this to our Git stage. 

Initial commit 

Once we have created our first file, we can add it to version control 
with the commands below. You will need to cd into the directory first - eg 
cd home/my-dev-repo. The add command adds everything in, then the 
commit -m command makes our commitment with a message. Finally git 
push origin master means we push the changes back to where they came on 
the master branch. 

001 git add . 

002 git commit -m "Initial commit" 

003 git push origin master 

View changes 

Head back to GitHub: github.com/kiksy/my-dev-repo, and you should 
see the new index.html file we just created appear in the main window. Next to 
it you should see the commit message that we just made in the command line. 
Clicking on the file will show you its contents. 
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Live server setup 

Now lets set up our live server ready to receive changes (you’ll need to 
have SSH access already set up). SSH into it, and enter the commands below, 
replacing the my-dev-repo with your own repo. This folder will be where we 
push to, but the actual files will be linked using a hook. 


Cf 6 dt 6 3 bare repo developement-site.com part with your own site's URL, and the my-dev-repo with 

Now we need to create a bare repo. This will contain a special your own repo. The command adds a remote called live, which can then be 

post-receive file, which we will use to trigger the copying of files once we push pushed or pulled from, 

to it from our local setup. Enter the code below to see a success message. 


Add remote 

A remote is a place where you can push or pull files or changes from 
another Git repository. Run the following commands, replacing the my- 


Create working directory 

Now, it is time for us to create the actual location on the server where 
the files will be placed. Note there is no need to add a new directory the git 
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clone will automatically make one for us. Once this has completed we are 
ready to edit our hooks files. 

001 cd ~/www/my-dev-site.com/web 

002 git clone /home/Repos/my-dev-repo.git 

Edit hooks 

From the Repos directory, change into the relevant Git repo ie 
my-dev-repo and then cd into the hidden hooks directory. We then need to 
create a new file called post-receive, which will run everytime we push to the 
live server. Here we are using the nano text editor to create it, but you can use 
Vi or whichever is your favourite. 

001 nano post-recieve 

[then copy the following to the file] 

002 #!/bin/bash 

003 export GIT_DIR=/var/www/test/testdev/.git/ 

004 export GIT_WORK_TREE=/var/www/test/testdev/ 

005 cd /var/www/test/testdev/ 

006 

007 git fetch 

008 git merge origin/master 

009 git submodule update --init —recursive 

Change permissions 

It’s very important to make sure that every file and directory has the 
correct permissions so that the code executes properly. We need to change 
the permissions on the post-receive file that we just created, but also make 
sure the working directory and Git repos are writable by your user. 

001 sudo chmod a-x post-receive 

Adding the user 

Adding the user to our group ensures that we can push the files, and the 
post-receive hook runs, and then the files can successfully be moved and 
copied by the server user. Here we are changing the group and permissions for 
the ubuntu user, but you would change this to whichever you log in as. 

001 sudo chgrp -R ubuntu * 

002 sudo chmod -R g+ws * 

003 git config core.sharedRepository true 

Push to live 

Now you can make some changes to your local site, and then push 
them up to live. Add some new lines to our index.html and then commit them 
with a message. Git push to the remote, and then the branch (by default 
master). You should then see the progress of the push. 

001 git commit -a -m “some new changes” 

002 

003 git push live master 

View results! 

Now you can open your site and view the changes. You can use the git 
log command to view a list of commits, and then roll back to them if you want 
to undo any changes that you or other people have made. 

001 git log 


kieron-h©word.te»tte»t kieronh©»grd» ait pu»h newdcv setter 
fount|ng nhjsrte: IK, rtnnr. 

Oeltt cosprcttion uiiog up to 2 thretdf. 

Cosprcttmg objeetti IMS (11/11), done. 

Writing object*; 10OS (13/13). 114.30 KiO. done. 

Total It (rinlta 1), rnturrt 0 (delta A) 
resote: *r©« /var/«epot/te*tdev 

rcsotet 3c8(97S..oa93fcf "•alter » ongin/*a*tcr 
resotc; Updating 3c8C97S..««93fcf 
resnte: Paet-fnrward 
rasote; .US.Stor# 
resotei .buildpath 
reoote; .protect 
resnte: .enrrInge/.jedrtrop* 

resote: .cettmgc/org.acUpte.pnp.cora.praft 

resotei .../erg.cclipte.wtt.jtdt.ui.tuperType.container 
resote; .settinga/ora.cclipic.sst.itdt.wi.tuperType.nase 
reoote: SlsaoFinder 
resotor go-p«*r.php 
resotei index.php 
resote; sitso.pbp 

resote: 11 files changed. 3250 insertlonst♦), 2 deletions!-) 
resote: create eode ieet>44 .buildpath 
resotei create sode 100844 .project 
resote; create sode 100044 .settings/.jsdtscooe 
resote: create sode 100644 .setUftgs/org.ecllDse.php.core.prefs 
resote: create sode iveoaa .tettmgt/org.eclipse.w«t.jtdt.ui.super type.container 
resotei create sode 100(44 .settings/org.eclipse.wst.jsdt.ui.cuperType.nase 
resote; create sode 1G00O0 Sissofindcr 
i mule; creole sode 100644 go-peer.php 
resote: create sode l««b4* sisso.php 

resotei No tubaodule napping found in .gitsodules for path ‘SissoFmder* 

To ioeginedev;/ver/Rcpos/tcstdc¥.git 
3c8697S..a«93fcf sealer -* sealer 
hieron-ho>ward: test test bieronhowardt 


Min bl4M bl4M bytes 
S • 

28 * 


J/J9 
18 • 

400 ~~ 



Resolving conflicts and 
other issues 


It's important to make sure that you keep each stage of 
the deployment process in sync. Manually copying 
files to the live server through FTP or other methods 
can cause issues. To resolve such issues, from within 
the live server run: 

[001 git checkout -f origin/master | 


and then: 

002 merge origin/master 


This command will pull back from the origin (usually 
GitHub) and then merge the changes back in to master. 
If there are still issues to resolve, you may need to use a 
merge tool such as WinMerge or the git-mergetool. 
Once the issues are resolved, you can commit again to 
mark that everything is okay, then run the merge 
command a final time. 


tutorials 


95 
















Championing the talents of 


Michael Western 

web www.freerangedesigns.ca 



Currentrole Freelance designer/creative director 
Education Bachelor of Commerce. University of Guelph; Design 
at Sessions School of Design 

Expertise Photoshop, Illustrator, Information Architecture, Logo 
Design, Visual Identity, HTML5. CSS3, jQuery 
Clients PoKu Design Build, In-Dey-Go Fundraising, Canmore 
Family Eyecare, Droptest, Rocky Mountain Bagel Co. 
Twitter @theDesignFarmer 


With a modern but approachable style, 
Michael combines his love for typography 
with bold colours, soft textures and clever 
design concepts. Upon entering the world of 
the web, he paid special attention to techniques 
and elements used in his favourite designs, 
which over time he has morphed into his own 
unique style that has been featured in many 
galleries across the internet. “The key,” he says, 
“is to use these techniques like spices. A sprinkle 
here and there to enhance the interest and 
usability of a site, but watch how much you use 
because a site can quickly become over 
seasoned and unfocused.” Michael is quick to 
point out that he is not an artist, but “a designer 
who solves problems. The whole point of 
design is to convey a message. Good design 
conveys a message quickly and effectively”. 


With a Bachelor of Commerce Degree and 
minor in Marketing, Michael offers a unique skill 
set ideal for his work. He has both the ability to 
evaluate a business and truly understand their 
goals and priorities, along with the skills to 
execute creative solutions through outside-the- 
box design strategies. 

Free Range Designs, Michael’s business and 
personal brand, was born from a general dislike 
of boundaries, both creatively and 
geographically. Neither of these seem to be 
posing a problem, however, as he is currently 
working with clients in England, Denmark, 
Australia, Canada and the US. Michael both 
enjoys and is very much open to collaborating 
with like minded programmers to create 
projects that push the limits of creativity both 
visually and functionally. 



Ol .w^w.fr£.eranfledesigns.ca 



01 

The cornerstone of Michael’s 
portfolio. Using a vertical scroll the 
site sets out to make a warm and 
sincere connection with the visitor 
using language and imagery. 


02 

Armed with the impressive 
Curtain.js plug-in and a vintage 
style, the site boosts a rather 
unexciting service with 
contemporary design. 


03 

The client dictated that he 
wanted his massive portfolio to 
be featured while instantly 
creating a level of interest with 
the visitor as soon as they arrive. 


04 

A small business needs a site that 
oozes character and steps a little 
outside the norm to get noticed. 
The colours, fonts and imagery 
add character and personality. 


05 

A memorable colour scheme and 
approachable style blends to create 
a friendly design that showcases the 
product and helps set it apart from 
the competition. 
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Romain Limacher 

web roma-artwork.com 



Current role Freelance web designer and graphic designer 
Education Self taught 

Expertise HTML, CSS, JavaScript, PHP, Photoshop 

Clients Humanist records, Ibex Sari, Green Cat editions, Privilege 
Ski school 

Twitter @greencatedt 


Blake is an art director with a focus on web 
design, front-end development and project 
management. Starting his career as an 
application developer he noticed a clear lack 
of usability in the government-level projects 
being delivered. After a few internal meetings 
he was offered his own creative department 
and started injecting usability and modern 
design trends into every project. From that 
point forward. Blake went on to work at 
multiple advertising agencies; from designing 
websites for local businesses to managing 
interactive campaigns for some of the world’s 
most recognisable brands. 

Being able to construct something that’s 
pixel-perfect and as accessible or impactful as 
possible is his main driving force in web design. 
He also understands that the website or user 
interface is one part of a larger story. To that 


end he gets a great deal of inspiration from 
Alex Bogusky’s Baked In and Jason Fried’s 
Rework. From a purely visual perspective he’s 
consistently admired Jonathan Hickman, Scott 
Hansen and Dieter Rams. App designs that 
have recently caught his attention include 
Partly Cloudy. Flight Card and Oink. 

Overall, his main concern is simply to 
communicate a message in the most effective 
way possible. To that degree his true focus is 
the larger picture of how a brand is perceived 
and each marketing piece that plays into that. 
In the future Blake hopes to help brands shape 
how they communicate and which avenues 
they choose to channel their voice. 

Currently Blake is focusing on responsive 
design for mobile platforms, pitching concepts 
for emerging trends and relocating to the San 
Francisco Bay Area. 



01 www.bieredesavoie.com 



01 

The graphic identity of BAS 
inspires the dark fancy design. 
The association of the Kraft 
texture and gothic elements 
creates authenticity. 


02 

The company needs a clear 
website for its products. This 
has been achieved by choosing 
a single page and avoiding 
unnecessary graphic elements. 


03 

Displaying a work station on a 
single-page site appeared to be 
the best way to show the 
diversity of the designers' work 
and emphasise their projects. 


04 

As the art dealer JUICE is 
targeting high-end clients, a 
modern design and deco style 
has been chosen to exhibit their 
high level products. 


05 

The grunge-style eCommerce site 
refers to the underground rock ’n' 
roll culture that brings to mind old 
school goodies, like stickers and 
posters from rock bands. 
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Web talent showcase 




L www.tartarugas.net 

FloripaJotos 


www.gedaleventQS.CQm.br 


2 www.flQripaiobs.CQm.br 


Logique 

web www.logique.com.br 



Currentrole Digital designer and developer 
Education Rio de Janeiro State University. Brazil 
Expertise Design, coding, plug-ins, WordPress, SEO, HTML5, 
CSS, JavaScript 

Clients Chevrolet, Nestle, Canal Rural. LG, Peugeot 
Twitter @lotwique 


For Gabriella, and the rest of the internet, It all 
started back in 1992 with a 386 pc Dx266 - 
since then the world has never stopped! Not to 

forget, it was dial-up for web access, and the 
floppy disk with its 1.44MB of storage was the 
choice for backups. 

She remembers DOS being the king OS, along 
with programming behemoths Clipper. Cobol, 
Mumps, dBase and Pascal. HTML was just a mere 
baby and CSS was not even on the radar. Looking 
forward 20 years, technology has changed 
beyond recognition - and Gabriella’s career is 
rooted in these changes. 

The experience, knowledge and creativity 
encountered along the way has brought us, and 
her. to the web as it is today. Proud of the 
knowledge acquired over the years, she believes 
that ethics, respect and education are the 


commitment she demonstrates to customers 
and web users alike. Working armed with plenty 
of content (which is king), it is her great ideas and 
the created aesthetic of sites that enable her to 
establish a visual identity for brands. 

Gabriella believes the beauty of new websites 
is the opportunity to produce new ideas. 
Redesigning a site provides a different challenge 
for her, but the satisfaction is almost as great 
when finished. To achieve great web design there 
are certain elements to believe in. 

Gabriella’s maxims could be described thusly. 
Ethics - always do what is right in business 
relationships. Focus - be competent and 
innovative in proposals, maximizing quality. 
People - have respect for people and their 
diversity. Obstacles. - know your limits; and Social 
- contribute to a better world. 


CAROLINE CERUTTI 



DcJ jO 


O' www.caroline ce rutti.CQni.br 


01 

Built for a tourism operator, the site is created 
with WordPress and uses a host of plug-ins 
including QTranslator, WP eCommerce and 
two payment gateways, PagSeguro Brazil 
and PayPal Global. 


02 

A site displaying job listings needs 
legibility as its core function - ease of use 
is tantamount for this kind of webpage. It 
was built using open-source software 
and then translated in to Portuguese. 


03 

An event site designed and developed 
using the WordPress platform. The site 
uses emotive central images displayed 
on an automatic slider to emphasise the 
company's core purpose. 


04 

A simple brochure site built to display 
the photographic talents of Caroline 
Cerutti. A woven background texture 
adds an air of the home-made, 
reinforcing that its a home business. 
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when ordering. You will actually be charged £65 sterling for an annual 
subscription. This is equivalent to $102 at the time of writing, although 
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V Sequence 

www.sequence.co.uk 
Sequence is a full-service digital agency 
with around 60 staff based in Cardiff and 
London. It believes in producing beautiful and 
clever digital work for clients, that will delight 
audiences. The agency's core strengths are in 
creative, technical and strategic, and it has been 
delivering award-winning work over 15 years for 
clients that include BBC, Disney Storm Models, 
the Cabinet Office, the Royal Mint, Donmar 
Warehouse, Fuller’s, Rachel’s Organic, the Welsh 
Government, and many others. 



100_trend map 


Cardiff is the capital city of 
Wales, located about two 
hours’ drive from London. 
The city boasts an extensive 
range of talent in the creative 
industries, and Doctor Who 
and Torchwood are both 
produced here. Cardiff is also 
the home to a large number 
of design and digital 
production indies. 


C ardiff has a thriving design scene, with a 
number of regular events geared 
towards digital creatives such as Cardiff 
Design Festival, Ignition, TEDxCardiff and a 
whole host of other events taking place on a 
regular basis all over the city. 

As well as the various festivals and events 
that pump life into the vibrant city scene. 
Cardiff has a larger-than-average TV 
production and design agency presence, 
which continues to thrive and produce shows 
for prime time TV and content for global 
brands. This activity is also actively supported 
at a political level, with the Welsh Government 
having recently set up a Creative Industries 
team that has a full focus on supporting the 
development of local talents and creative 
work across TV and digital. 

Looking back at events, the Cardiff Design 
Festival is currently in it’s eighth year and has 
grown form strength-to-strength under the 
leadership of Olwen Moseley. It has huge 
support from local agencies and institutions 
who contribute bags of time and talent to the 
festival. TEDxCardiff is a relatively new feature 
on the calendar, but has been really well 
received with organisers Claire Scantlebury 
and Neil Cocker consistently pulling together 
inspirational speaker line-ups that sell out 
tickets in hours. 


The market has 
grown to realise the 
need for cutting- 
edge services 














































































































































































































trend map 


Carbon Studio 

www.carbonstudio. 

co.uk 

Carbon Studio has been 
creating award-winning 
interactive brand experiences 
for clients and its customers 
since 2007 The studio believes 
that working collaboratively is 
key to creating an outstanding 
product, and it forms a close 
partnership with their clients so 
that it can gain a deeper 
understanding of their needs. 




Roughcollie 

www.rouahcollie.tv 

Roughcollie, established in 2002, 
has a long and successful 
heritage in motion, graphic and 
interactive design. It brands, designs and 
animates titles, ads and promos for 
television and cinema, as well as 
producing dynamic websites, and 
creating visual effects and music promos. 
They have a healthy working relationship 
with the Welsh-language channel, S4C. 



Mark Boulton 
Design 

www.markboulton 

desian.co.uk 


Mark Boulton Design is a creative 
agency working with global 
organisations big and small, such as 
ESPN, Warner Bros, BBC, British 
energy and Drupal. It has an 
obsession with simplicity and a knack 
for fusing user experience design 
with traditional design practice. In 
essence, this studio makes smart, 
simple stuff beautifully. 




Cardiff is home to 
the world’s oldest 
record store, Spillers 
Records, which 
opened in 1894 




- / 

* 
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Departures 

www.departuresdesign.com 

Departures is a specialist branding and communication 
studio. It is passionate about what it does; passionate about 
the excellence, creativity, and power of ideas to move things 
on. Brand identity, print, digital communication, and art direction 
come together in the work that shows just how much Departures 
enjoys working with its clients. 


Stand.i.wd 


Recommended hotspots 



Mark Johnson, 


Creative director 

, 4 . • . 

Chapter Arts Centre 






Claire Scantlebury, 
Production manager 

10 Feet Tall 


The Chapter is an integral part of creativity in Cardiff. 
Recently refurbished, it’s become more relevant than 
ever and has a bar, restaurant, gallery and cinemas 
that serve up some great events and atmosphere for 
the creative quarter. 


A great bar and venue spread over three floors in 
Cardiff city centre. The venue is great for just 
hanging out with friends on a night out, or catching 
bands and talks that are hosted for free all year 
round. Love it. 


In Cardiff city centre (and just round the corner 
from the Sequence offices), Buffalo is great as an 
extra meeting or chill out space for the agency, 
plus the music and atmosphere is relaxed and 
vibey at the same time. 
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designer Subscriptions Voucher 


YES! I would like to subscribe to Web Designer 

Your details 

Title_First name_ 

Surname_ 

Address_ 


Postcode_Country_ 

Telephone number_ 

Mobile number_ 

Email address_ 

Please complete your email address to receive news and special offers 

Direct Debit Payment 

UK Direct Debit payment 

I will receive my first three issues for just £1,1 will then pay only £25.15 every six issues thereafter. If, however, I do not 
love what I see, I can cancel at any time. 



Instruction to your Bank or 
Building Society to pay by Direct Debit 


fD 


.DIRECT 

Debit 


Please fill In the form and send it ta Imagine Publishing Limited. 800 Gulllat Avenue. Kent Science Park, Sittingbourne. ME9 8GU 



Payment details 

YOUR EXCLUSIVE READER PRICE 1 YEAR (13 ISSUES) 

UK £62.30 (Save 20%) I Europe £70 I World £80 


Cheque 

I enclose a cheque for £_ 

(made payable to Imagine Publishing Ltd) 


Credit/Debit Card 

Visa I MasterCard I Amex 

Card number 


I I I 1 I 


Maestro 
Expiry date 


Security number T 


(last three digits on the strip at the back of the card) 


Issue number I I (if Maestro) 


Signed_ 

Date_ 

Code: PCG202 

r Tick this box if you do not wish to receive any promotional material from Imagine Publishing Ltd. 

(“I Tick this box if you do not wish to receive promotional material from other companies. 

Terms and conditions apply. We publish 13 issues a year. Your subscription will start from the next available 
issue unless otherwise indicated. Direct Debit-guarantee details available on request This offer expires 
without notice. 

I would like my subscription to start from issue: I I I 

Return this order form to: 

Web Designer Subscriptions Department, 800 Guillat Avenue, 

Kent Science Park, Sittingbourne, ME9 8GU, or email it to 

webdesigner@servicehelpline.co.uk 
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DEPLOY A LIVE 
SITE USING GIT 

Speed up and simpify 
your development 
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FANTASTIC 

SUBSCRIBER 

OFFER 

Subscribe today and 
get your first three 
issues for only £1 

Pay only £4.19 for every future issue 
- a 30% saving on the store price 
«* Free UK delivery to your door 
«• Never miss an issue 
Money-back guarantee 


‘Terms & Conditions 

This offer entitles new U K direct debit subscribers to receive their 
first three issues for £1. After these issues, subscribers will then pay 
£25.15 every six issues. Subscribers can cancel this subscription 
at any time. New subscriptions will start from the next available 
issue. Offer code PCG202 must be quoted to receive this special 
subscription price. Details of the direct debit guarantee are available 
on request. Offer expires 31 January 2013. Imagine Publishing 
reserves the right to limit this type of offer to one per household. 

Sou rce code: PCG202 

Web address: www.imaginesubs.co.uk/wed 

Tel: 0844 848 8413 


Manage your subscription account online at www.imaginesubs.co.uk 
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Get your first 3 issues for 
just £1, then save 30% 
on the shop price 


THREE EASY WAYS TO SUBSCRIBE 

3. Post or email 


1. Online 

Order via credit or debit card, just visit: 

www.imaginesubs.co.uk/wed 

and enter code PCG202 

2. Telephone 

Order by phone, just call: 

0844 848 8413 

Overseas: +44 (0) 1795 592 878 and quote code PCG202 


Please complete the form and post it to: 

Web Designer Subscriptions, 

800 Guillat Avenue, 

Kent Science Park, 

Sittingbourne, ME9 8GU 

Alternatively, scan and email the form to: 

webdesigner@servicehelpline.co.uk 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 
•Unlimited websites • Use your own brand throughout 
•Unlimitedbandwidth • 24/7 expert UK-based support 
•Unlimited web space • No-risk trial - 3 months free 
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Got a deal 
you think we 
should list? 

Whether you're a hosting firm keen to promote your 
products or a happy customer who wants a favourite 
provider to be listed, drop us a line with the details! 

webdesigner@imagine-publishing.co.uk 


Keep an eye on the latest packages and 

deals with our comprehensive list of service providers 


NAME AND URL 



l&l 


1&1 Internet Ltd. 

www.1and1.co.uk 


1&1 Starter (Linux) 
l&l Standard (Linux) 
1&1 Standard (MS) 

1&1 Unlimited (Linux) 
l&l Unlimited (MS) 
l&l Business (Linux) 
l&l Business (MS) 


08443351211 £29.88 5GB Unlimited 1,000 / X / / / / / 

08443351211 £59.88 50GB Unlimited 3,000 / / / / / / / 

08443351211 £71.88 50GB Unlimited 3,000 / X / / / / / 

08443351211 £83.88 Unlimited Unlimited 5,000 / / / / / / / 

08443351211 £107.88 Unlimited Unlimited 5,000 / X / / / / / 

08443351211 £119.88 Unlimited Unlimited Unlimited / / / / / / / 

08443351211 £155.88 Unlimited Unlimited Unlimited / X / / / / / 


111WebHoSt.com Unlimited Web Hosting Pack N/A 

IIIWSDrlOST 8 http://111webhOSt.com starter Web Hosting Pack N/A 

Budget Web Hosting Pack N/A 
WordPress Web Hosting Pack N/A 
Drupal Web Hosting Pack N/A 
Joomla! Web Hosting Pack N/A 
osCommerce Web Hosting Pack N/A 
ZenCart Web Hosting Pack N/A 

PrestaShon Weh Hostina Park N/A 


£60 Unlimited Unlimited Unlimited / 


£30 

£12 

£24 

£24 

£24 

£24 

£24 

£24 


5GB 

1GB 

5GB 

5GB 

5GB 

5GB 

5GB 

5GB 


2GB 

1GB 

2GB 

2GB 

2GB 

2GB 

2GB 

2GB 


100 

5 

100 

100 

100 

100 

100 

100 


123-reg (www.123-reg.co.uk) 

Starter 

0845 859 0018 

£29.88 

1GB 

5GB 

20 




y 

y 

y 

y 

123-reg (www.123-reg.co.uk) 

Plus 

0845 859 0018 

£59.88 

5GB 

50GB 

500 

/ 



y 

y 

y 

y 

123-reg (www.123-reg.co.uk) 

Pro 

0845 859 0018 

£107.88 

10GB 

100GB 

750 

/ 



y 

y 

y 

y 

123-reg (www.123-reg.co.uk) 

Bus Pro 

0845 859 0018 

£179.88 

20GB 

Unlimited 

1.000 

/ 



y 

y 

y 

y 

123-reg (www.123-reg.co.uk) 

Plus (MS) 

0845 859 0018 

£59.88 

2GB 

25GB 

100 

✓ 



y 

y 

y 

y 

123-reg (www.123-reg.co.uk) 

Pro (MS) 

0845 859 0018 

£107.88 

5GB 

50GB 

500 

/ 



y 

y 

y 

y 

123-reg (www.123-reg.co.uk) 

Bus Pro (MS) 

0845 859 0018 

£179.88 

10GB 

150GB 

1.000 

/ 



y 

y 

y 

y 

2020Media (www.2020media.com) 

Light User 

0870 3212020 

£45 

20MB 

1GB 

3 

/ 

/ 

✓ 

y 

y 

y 

y 

2020Media (www.2020media.com) 

Everyday 

0870 3212020 

£100 

200MB 

10GB 

15 

/ 

/ 

✓ 

y 

y 

y 

y 

2020Media (www.2020media.com) 

Business/Pro 

0870 3212020 

£275 

500MB 

20GB 

50 

/ 

/ 

✓ 

y 

y 

y 

y 

2020Media (www.2020media.com) 

JAVA Tomcat 

0870 3212020 

£300 

100MB 

3GB 

15 

✓ 

✓ 

✓ 

y 

y 

y 

y 

2020Media (www.2020media.com) 

ASP.Net 

0870 3212020 

£275 

100MB 

3GB 

15 

/ 

/ 

/ 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Bronze Package 

0845166 8386 

£40 

10MB 

500MB 

2 

/ 


✓ 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Silver Package 

0845166 8386 

£64.99 

20MB 

2GB 

10 

✓ 


✓ 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Gold Package 

0845166 8386 

£79.99 

50MB 

2GB 

50 

/ 


/ 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Titanium Package 

0845166 8386 

£149.99 

500MB 

5GB 

500 

✓ 


y 

y 

y 

y 

y 

4D Data Centres (www.4dhosting.com) 

Reseller Package 

0845166 8386 

£299.99 

1GB 

10GB 

1.000 

/ 


y 

y 

y 

y 

y 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Home 

N/A 

£40 

500MB 

5GB 

5 

/ 

/ 

y 

y 


y 

y 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Business 

N/A 

£50 

1GB 

20GB 

100 

/ 

/ 

y 

y 


y 

y 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

eCommerce 

N/A 

£100 

2GB 

40GB 

200 

✓ 

/ 

y 

y 


y 

y 

Blackfoot Hosting Ltd (www.blackfoot.co.uk) 

Professional 

N/A 

£150 

3GB 

60GB 

300 

/ 

/ 

y 

y 


y 

y 

Blacknight (www.biacknight.com) 

Minimus 

35359 9183072 

£45 

10GB 

200GB 

Unlimited 

✓ 

✓ 

y 

y 

y 

y 

y 

Blacknight (www.blacknight.com) 

Medius 

35359 9183072 

£79 

20GB 

400GB 

Unlimited 

/ 

/ 

y 

y 

y 

y 

y 

Blacknight (www.blacknight.com) 

Maximus 

35359 9183072 

£45 

30GB 

600GB 

Unlimited 

/ 

✓ 

y 

y 

y 

y 

y 

Bravo14 (http://bravo14.co.uk) 

Starter Linux 

N/A 

£130 

2,000MB 

2,000MB 

10 

/ 

/ 

y 

y 


y 

y 

Bravo14 (http://bravo14.co.uk) 

Starter Windows 

N/A 

£20 

2.000MB 

2.000MB 

10 

/ 

/ 

y 

y 


y 

y 

Bravo14 (http://bravo14.co.uk) 

Business Linux 

N/A 

£45 

4,000MB 

4.000MB 

4.000 

/ 

/ 

y 

y 


y 

y 

Bravo14 (http://bravo14.co.uk) 

Business Windows 

N/A 

£45 

4.000MB 

4.000MB 

4,000 

/ 

/ 

y 

y 


y 

y 

Bravo14 (http://bravo14.co.uk) 

Ultimate Linux 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

✓ 

✓ 

y 

y 


y 

y 

Bravo14 (http://bravo14.co.uk) 

Ultimate Windows 

N/A 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

y 

y 


y 

y 

Daily Internet (www.daily.co.uk) 

Entry 

0845 466 2100 

£19.28 

500MB 

5GB 

75 

/ 


y 


y 

y 

y 

Daily Internet (www.daily.co.uk) 

Home 

0845 466 2100 

£50.90 

3GB 

30GB 

30 

/ 

/ 

y 


y 

y 

y 

Daily Internet (www.daily.co.uk) 

Business 

0845 466 2100 

£53.94 

12GB 

150GB 

600 

/ 

/ 

y 


y 

y 

y 

Daily Internet (www.daily.co.uk) 

Business Plus 

0845 466 2100 

£77.94 

24GB 

250GB 

Unlimited 

/ 

/ 

y 


y 

y 

y 

Designwasp (http://designwasp.com) 

Starter 

0844372 9848 

£30 

3GB 

20GB 

1.000 

✓ 

✓ 


y 


y 

y 

Designwasp (http://designwasp.com) 

Home 

0844 372 9848 

£40 

10GB 

50GB 

10.000 

/ 

/ 


y 


y 

y 

Designwasp (http://designwasp.com) 

Business 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

✓ 


y 


y 

y 



X 

X 

X 

X 

X 

X 

X 


X 

X 

X 

X 

X 

X 

X 

X 

X 
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fasthosts 


Get your listing highlighted! Contact Richard 
O richard.rust@iniagine-publishing.co.uk 


^ 0+44(0)1202586436 


hosting listings 


Featured host of the month: Blackfoot Hosting 


www.blackfoot.co.uk 



NAME AND URL 


Offering more reasons for choosing one of the listed providers 

Blackfoot is an experienced UK-based web-hosting provider and first-class delivery. Hosting options are available in five flavours 
with a proven pedigree in offering hosting and domain name ranging from the entry-level Home solution for £40 per year, up to 

registration services since 1999. Specialising in Linux-based the powerful eCommerce, Professional and Partner packages priced 

servers, housed across three London data centres, Blackfoot promises between £100-200. All come with access to the feature-packed cPanel 
24/7 monitoring and a dedicated support team to guarantee uptime control panel for intuitive maintenance. 



Designwasp (http://designwasp.com) 

Windows Unlimited 

0844 372 9848 

£60 

Unlimited 

Unlimited 

Unlimited 

✓ 

/ 


/ 


/ 

✓ 


Designwasp (http://designwasp.com) 

Windows Home 

0844372 9848 

£40 

10GB 

50GB 

1,000 

✓ 

/ 


✓ 


✓ 

✓ 


Designwasp (http://designwasp.com) 

CheapHost 

0844372 9848 

£10 

300MB 

100MB 

5 




/ 



✓ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal 

01865589 990 

£12 

1GB 

Unlimited 

10 

/ 



/ 

/ 

/ 

/ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Personal Plus 

01865 589 990 

£48 

Unlimited 

Unlimited 

50 

/ 



/ 

✓ 

/ 

✓ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business 

01865 589 990 

£108 

5GB 

Unlimited 

1000 

/ 

/ 


/ 

/ 

/ 

/ 


Digital Gibbon Ltd (http://digitalgibbon.com) 

Business Professional 

01865 589 990 

£132 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 

/ 

/ 

/ 


Domaincheck (www.domaincheck.co.uk) 

Bronze Linux 

0191 261 2252 

£30 

100MB 

1GB 

5 


/ 

✓ 

/ 

/ 

/ 

/ 

/ 

Domaincheck (www.domaincheck.co.uk) 

Gold Linux 

0191261 2252 

£100 

500MB 

5GB 

25 

✓ 

✓ 

✓ 

✓ 

✓ 

/ 

/ 

✓ 

Domaincheck (www.domaincheck.co.uk) 

Bronze Windows 

0191261 2252 

£30 

100MB 

1GB 

5 


/ 

/ 

✓ 

✓ 

✓ 

/ 

✓ 

Domaincheck (www.domaincheck.co.uk) 

Gold Windows 

0191261 2252 

£100 

500MB 

5GB 

25 

/ 

✓ 

✓ 

✓ 

/ 

/ 

/ 

/ 

Donhost (www.donhost.co.uk) 

Reseller Unix 

0845 226 5566 

£399.99 

Unlimited 

Unlimited 

Unlimited 

/ 


/ 

✓ 

✓ 

✓ 

/ 


Donhost (www.donhost.co.uk) 

Reseller Windows 

0845 226 5566 

£499.99 

Unlimited 

Unlimited 

Unlimited 

/ 


/ 

/ 

/ 

/ 

/ 


Donhost (www.donhost.co.uk) 

Enterprise 

0845 226 5566 

£89.99 

1GB 

2GB 

250 

/ 


/ 

/ 

/ 

/ 

/ 


Donhost (www.donhost.co.uk) 

Commerce 

0845226 5566 

£179.99 

2GB 

5GB 

500 

/ 


✓ 

✓ 

✓ 

/ 

✓ 


Donhost (www.donhost.co.uk) 

Designer 

0845 226 5566 

£119.99 

1GB 

2GB 

250 

/ 


/ 

/ 

/ 

/ 

/ 


Donhost (www.donhost.co.uk) 

Developer 

0845 226 5566 

£259.99 

2GB 

5GB 

500 

/ 


✓ 

✓ 

✓ 

/ 

/ 


eHosting (www.ehosting.com) 

Starter 

0844 999 4100 

£23.88 

1GB 

25GB 

10 






/ 

/ 

/ 

eHosting (www.ehosting.com) 

Personal 

0844999 4100 

£59.88 

2.5GB 

Unlimited 

50 

/ 





/ 

/ 

/ 

eHosting (www.ehosting.com) 

Expert 

0844 999 4100 

£95.88 

5GB 

Unlimited 

250 

/ 





/ 

/ 

/ 

eHosting (www.ehosting.com) 

Virtual 

0844 999 4100 

£227.88 

50GB 

Unlimited 

Unlimited 

/ 




/ 

/ 

/ 

/ 

Equiphase (www.equiphase.net) 

Bronze 

0121 314 4865 

£30 

200MB 

2GB 

10 

/ 

/ 


/ 


/ 

/ 

/ 

Equiphase (www.equiphase.net) 

Silver 

0121 314 4865 

£42 

400MB 

5GB 

20 

/ 

/ 


/ 


/ 

/ 

/ 

Equiphase (www.equiphase.net) 

Gold 

0121 314 4865 

£72 

800MB 

10GB 

100 

/ 

/ 


/ 


/ 

/ 

/ 

Equiphase (www.equiphase.net) 

Platinum 

0121 314 4865 

£114 

1.200MB 

40GB 

200 

/ 

✓ 

/ 

/ 

✓ 

✓ 

✓ 

/ 

Eurofasthost.com (www.eurofasthost.com) 

Email Only 

02380 249 823 

£40 

1GB 

2GB 

10 



/ 

/ 

✓ 

/ 

/ 

/ 

Eurofasthost.com (www.eurofasthost.com) 

Essential 

02380 249 823 

£75 

2GB 

5GB 

10 



✓ 

✓ 

✓ 

✓ 

✓ 

✓ 

Eurofasthost.com (www.eurofasthost.com) 

Superior 

02380 249 823 

£140 

5GB 

10GB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Eurofasthost.com (www.eurofasthost.com) 

Premium 

02380 249 823 

£250 

10GB 

25GB 

100 

/ 

✓ 

/ 

✓ 

✓ 

/ 

/ 

/ 

Evohosting (www.evohosting.co.uk) 

Starter 

N/A 

£29.99 

500MB 

1GB 

3 

/ 

/ 

✓ 

✓ 


✓ 

✓ 

✓ 

Evohosting (www.evohosting.co.uk) 

Home 

N/A 

£54.99 

2.5GB 

30GB 

50 

/ 

/ 

✓ 

/ 


/ 

/ 

/ 

Evohosting (www.evohosting.co.uk) 

Business 

N/A 

£79.99 

6.5GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 


/ 

/ 

/ 

Evohosting (www.evohosting.co.uk) 

eCommerce 

N/A 

£159.99 

30GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 


/ 

/ 

/ 

Giacom (www.giacom.com) 

Business Pro 

08005427500 

£199 

100MB 

2GB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

^ - 

Personal 

08081686777 

£3287 

5GB 

Unlimited 

50 

/ 

X 

/ 

/ 

/ 

/ 

/ 

X 


Business Bronze 

08081686777 

£58.38 

50GB 

Unlimited 

500 

/ 

Option 

/ 

/ 

/ 

/ 

/ 

X 


Business Silver 

0808168 6777 

£76.39 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

/ 

/ 

/ 

/ 

/ 

X 

Fasthosts 

Business Gold 

08081686777 

£101.89 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

www.fasthosts.co.uk 

WD Starter 

0808168 6777 

£149.99 

20GB 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

X 


WD Advanced 

08081686777 

£199.99 

Unlimited 

Unlimited 

Unlimited 

/ 

Option 

Option 

/ 

/ 

/ 

/ 

X 


Heart Internet (www.heartinternet.co.uk) 

Starter Professional 

0845 644 7750 

£29.80 

2.5GB 

10GB 

1,000 




/ 


/ 

/ 

Heart Internet (www.heartinternet.co.uk) 

Home Professional 

0845 644 7750 

£89.99 

10GB 

50GB 

10,000 

/ 

/ 


/ 


/ 

/ 

Heart Internet (www.heartinternet.co.uk) 

Business Professional 

0845 644 7750 

£129.99 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


/ 


/ 

/ 

Heart Internet (www.heartinternet.co.uk) 

Reseller Professional 

0845 644 7750 

£299.99 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


/ 


/ 

✓ 

Hostway (www.hostway.co.uk) 

Silver 

08081801880 

£79.50 

150MG 

3GB 

5 


Option 

✓ 

/ 


/ 

✓ 

Hostway (www.hostway.co.uk) 

Gold 

08081801880 

£139.50 

300MB 

5GB 

10 

/ 

Option 

/ 

/ 

✓ 

/ 

✓ 

Hostway (www.hostway.co.uk) 

Gold Plus 

08081801880 

£189.50 

450MB 

10GB 

30 

/ 

Option 

/ 

/ 

/ 

/ 

/ 

Hostway (www.hostway.co.uk) 

Platinum 

08081801880 

£359.50 

600MB 

20GB 

50 

/ 

Option 

✓ 

✓ 

✓ 

/ 

✓ 

Hostway (www.hostway.co.uk) 

Platinum Plus 

08081801880 

£599.50 

1.2GB 

40GB 

10 

/ 

Option 

/ 

/ 

/ 

/ 

✓ 

Hostway (www.hostway.co.uk) 

Email Plus 

08081801880 

£49.95 

50MB 

N/A 

5 

N/A 

N/A 

N/A 

✓ 


✓ 

/ 

ICUK www.icukhosting.co.uk 

Professional 

0845 009 9175 

£30 

250MB 

1GB 

50 

/ 

/ 

option 

/ 

/ 

✓ 

✓ 

ICUK www.icukhosting.co.uk 

Advanced 

0845 009 9175 

£50 

2GB 

2.5GB 

150 

/ 

/ 

option 

/ 

✓ 

/ 

/ 

ICUK www.icukhosting.co.uk 

Enterprise 

0845 009 9175 

£80 

2GB 

500MB 

Unlimited 

/ 

✓ 

option 

/ 

/ 

/ 

/ 

ICUK www.icukhosting.co.uk 

Professional Plus 

0845 009 9175 

£90 

500MB 

5GB 

100 

/ 

/ 

option 

/ 

/ 

/ 

/ 

ICUK www.icukhosting.co.uk 

Premium Plus 

0845 009 9175 

£150 

1GB 

12.5GB 

500 

/ 

/ 

option 

/ 

✓ 

/ 

/ 
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Our web-hosting guide is brought to you in association with 
Fasthosts, the UK’s leading reseller web-hosting provider 
•Unlimited websites • Use your own brand throughout 

•Unlimitedbandwidth • 24/7 expert UK-based support 
•Unlimited web space • No risk trial - 3 months free 


Hosting listings 



Keep an eye on the latest packages 
and deals with our comprehensive list of service providers 

Discover what an enhanced 
listing can do for your 
business. Contact Richard on: 

0 + 44 ( 0)1202586436 

Continued... 



NAME AND URL 



ICUK www.icukhosting.co.uk 

Enterprise Plus 

0845 009 9175 

£300 

2GB 

20GB 

Unlimited 

✓ 

✓ 

option 

/ 

/ 

✓ 

/ 


ICUK www.icukhosting.co.uk 

Reseller Windows 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

option 

/ 

/ 

/ 

/ 


ICUK www.icukhosting.co.uk 

Reseller Linux 

0845 009 9175 

£200 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

option 

/ 

/ 

/ 

/ 


ICUK www.icukhosting.co.uk 

Reseller Enterprise 

0845 009 9175 

£500 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

option 

/ 

/ 

/ 

/ 


JAB Web Hosting (www.jabwebhosting.com) 

Mail - M105 

0800 043 0153 

£15.17 

256MB 

3GB 

50 




/ 

/ 

/ 

/ 

/ 

JAB Web Hosting (www.jabwebhosting.com) 

Home - H25 

0800 043 0153 

£24.47 

1GB 

8GB 

50 

/ 



/ 

/ 

/ 

/ 

/ 

JAB Web Hosting (www.jabwebhosting.com) 

Professional - P55 

0800 043 0153 

£45 

2GB 

15GB 

75 

✓ 

/ 


✓ 

✓ 

/ 

/ 

/ 

JAB Web Hosting (www.jabwebhosting.com) 

Reseller - R25 

0800 043 0153 

£97.88 

2GB 

30GB 

250 

✓ 

✓ 


/ 

/ 

✓ 

/ 

✓ 

JAB Web Hosting (www.jabwebhosting.com) 

Reseller-R105 

0800 043 0153 

£271.60 

4GB 

Unlimited 

Unlimited 

✓ 

/ 


/ 

/ 

/ 

/ 

✓ 

LCN (www.lcn.com) 

Blog 

01438342 490 

£20 

100MB 

1GB 

5 



/ 

/ 

/ 

/ 

/ 

/ 

LCN (www.lcn.com) 

Starter 

01438 342 490 

£30 

1GB 

1GB 

10 



/ 

/ 

/ 

/ 

/ 

/ 

LCN (www.lcn.com) 

Starter 

01438 342 490 

£30 

1GB 

1GB 

10 



/ 

/ 

/ 

/ 

/ 

/ 

LCN (www.lcn.com) 

Dynamic 

01438342 490 

£50 

2GB 

2GB 

20 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 

/ 

LCN (www.lcn.com) 

Premium 

01438342 490 

£80 

5GB 

5GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

✓ 

LCN (www.lcn.com) 

Unlimited 

01438342 490 

£120 

Unlimited 

Unlimited 

Unlimited 

✓ 

✓ 

/ 

/ 

/ 

✓ 

✓ 

/ 

LD Hosts (http://ldhosts.co.uk) 

LD Budget (Linux) 

07891235858 

£11.88 

1GB 

1GB 

500 

/ 

/ 


/ 

/ 

/ 

/ 


LD Hosts (http://ldhosts.co.uk) 

LD Home (Linux) 

07891235858 

£23.88 

10GB 

10GB 

5,000 

/ 

/ 


/ 

/ 

✓ 

/ 


LD Hosts (http://ldhosts.co.uk) 

LD Pro (Linux) 

07891235858 

£41.88 

50GB 

50GB 

20,000 

/ 

/ 


✓ 

/ 

✓ 

/ 


LD Hosts (http://ldhosts.co.uk) 

LD Unlimited (Linux) 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

✓ 

/ 


/ 

/ 

✓ 

/ 


LD Hosts (http://ldhosts.co.uk) 

Windows Home 

07891235858 

£17.88 

2GB 

2GB 

1,000 

/ 

✓ 


/ 

/ 

/ 

/ 


LD Hosts (http://ldhosts.co.uk) 

Windows Unlimited 

07891235858 

£60 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 


✓ 

/ 

✓ 

✓ 


Media Temple (http://mediatemple.net) 

Shared-Server Pro 

+1 310 8415500 

£64 

2GB 

1TB 

1,000 

✓ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

NameHOG 

*r Affordable internet Solutions 

EMAIL ONLY 

STARTER 

01604212 904 

01604212904 

£11.99 

£36.99 

2.5GB 

10GB 

15GB 

150GB 

10 

Unlimited 

✓ 

X 

X 

/ 

X 

X 

/ 

/ 

/ 

/ 

/ 

/ 

✓ 

/ 

/ 

✓ 

/ 

/ 

✓ 

/ 

/ 

✓ 

/ 

/ 

HOME PRO 

01604212904 

£59.99 

25GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

NameHOG www.namehog.net 

BUSINESS 

01604212 904 

£109.99 

Unlimited 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Namesco (www.names.co.uk) 

Startup Plus 

0845 363 3632 

£89.99 

500MB 

5GB 

10 

✓ 

✓ 

✓ 

✓ 

✓ 

✓ 

/ 

✓ 

Namesco (www.names.co.uk) 

Business 

08453633632 

£149.99 

2,000MB 

20GB 

100 



/ 

/ 

/ 

/ 

/ 

/ 

Namesco (www.names.co.uk) 

Business Plus 

08453633632 

£89.99 

3,000MB 

30GB 

200 

✓ 

/ 

✓ 

✓ 

/ 

/ 

/ 

/ 

Namesco (www.names.co.uk) 

Designer 

08453633632 

£239.88 

1GB 

20GB 

200 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 

/ 

Namesco (www.names.co.uk) 

Designer Plus 

0845 363 3632 

£479.88 

Unlimited 

30GB 

Unlimited 

✓ 

✓ 

/ 

✓ 

✓ 

✓ 

/ 

✓ 

(2J NETCETERH 

DEVELOPER 

ONE 

08000612801 

0800 061 2801 

£32.89 

£109.99 

1GB 

5GB 

Unlimited 

Unlimited 

500 

1000 

/ 

/ 

/ 

/ 

y 

V 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

RESELLER 

08000612801 

£274.89 

Unlimited 

Unlimited 

1000 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

Netcetera www.netcetera.co.uk 

VM500 Server 

08000612801 

£300 

20GB 

Unlimited 

Unlimited 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 


2200DC Server 

0800 0612801 

£720 

160GB 

Unlimited 

Unlimited 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 


3000DC Server 

08000612801 

£1,200 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

y 

/ 

/ 

/ 

/ 

✓ 


2600QC Server 

0800 0612801 

£1,800 

2x500GB 

Unlimited 

Unlimited 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

Shared 100 

02071000 424 

£60 

100MB 

1GB 

5 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS100 

02071000 424 

£600 

5GB 

5GB 

5 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS200 

02071000 424 

£1,000 

10GB 

10GB 

10 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

VS300 

02071000 424 

£2,000 

15GB 

50GB 

20 

/ 

/ 

y 

/ 

/ 

/ 

/ 

/ 

Netplan (www.netplan.co.uk) 

Dedicated Servers 

02071000 424 

£3,000+ 

73GB+ 

1,500GB 

100+ 

/ 

/ 

y 

✓ 

/ 

/ 

/ 

/ 

PurplePaw (www.purplepaw.co.uk) 

Email 

N/A 

£25 

100MB 

1GB 

10 



/ 

✓ 


✓ 

✓ 


PurplePaw (www.purplepaw.co.uk) 

Play 

N/A 

£40 

100MB 

1GB 

10 



/ 

✓ 


✓ 

✓ 


PurplePaw (www.purplepaw.co.uk) 

Plus 

N/A 

£65 

750MB 

5GB 

25 

✓ 

/ 

/ 

/ 


/ 

/ 


PurplePaw (www.purplepaw.co.uk) 

Power 

N/A 

£95 

2GB 

10GB 

100 

/ 

✓ 

✓ 

✓ 


✓ 

✓ 


PurplePaw (www.purplepaw.co.uk) 

R3 Reseller 

N/A 

£660 

10GB 

50GB 

Unlimited 

/ 

/ 

/ 

/ 


/ 

/ 


Reddex UK (www.reddexuk.com) 

Reddex Design Starter 

0843 289 4625 

£18 

1GB 

Unlimited 

10 

✓ 


/ 

/ 

/ 

✓ 

/ 

/ 

Reddex UK (www.reddexuk.com) 

Reddex Design Business 

0843 289 4625 

£59.88 

10GB 

Unlimited 

100 

✓ 

✓ 

✓ 

✓ 

/ 

✓ 

/ 

✓ 

Reddex UK (www.reddexuk.com) 

Reddex Design Premium 

0843 289 4625 

£107.88 

100GB 

Unlimited 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

Skymarket (www.skymarket.co.uk) 

Standard 1 

0800 321 7788 

£49 

10MB 

2GB 

1 

✓ 


✓ 

✓ 

/ 

✓ 

/ 

✓ 

Skymarket (www.skymarket.co.uk) 

Standard 2 

0800 321 7788 

£69 

20MB 

2GB 

1 

✓ 


✓ 

/ 

/ 

/ 

/ 

/ 
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Get your listing highlighted! Contact Richard 
O richard.rust@iniagine-publishing.co.uk 
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Can you 
recommend 
your host? 


Tweet us today with your 

O hosting comments and advice 

@WebDesignerMag 




NAME AND URL 



Skymarket (www.skymarket.co.uk) 

Premium 1 

0800 321 7788 

£99 

25MB 

2GB 

1 

/ 


✓ 

✓ 

✓ 

/ 

✓ 

/ 

Skymarket (www.skymarket.co.uk) 

Premium 2 

0800 321 7788 

£149 

50MB 

2GB 

1 

/ 


✓ 

/ 

✓ 

/ 

/ 

/ 

STRATO Hosting (www.strato-hosting.co.uk) 

STRATO BasicWeb 

00800 8007 0070 

£48 

2GB 

Unlimited 

1.000 



/ 

/ 

/ 

/ 

/ 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO PowerWeb 

0080080070070 

£72 

6GB 

Unlimited 

2,000 

/ 


/ 

/ 

/ 

/ 

/ 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO AdvancedWeb 

00800 8007 0070 

£120 

20GB 

Unlimited 

4.000 

/ 


/ 

/ 

✓ 

/ 

/ 


STRATO Hosting (www.strato-hosting.co.uk) 

STRATO EnterpriseWeb 

00800 8007 0070 

£180 

50GB 

Unlimited 

6,000 

/ 


/ 

/ 

/ 

/ 

/ 


Streamline.net (www.streamline.net) 

Trial (3 month) 

0844 9411000 

N/A 

10GB 

Unlimited 

1.000 

/ 

Option 

/ 

/ 

/ 

/ 

/ 


Streamline.net (www.streamline.net) 

Starter 

0844 9411000 

£23.88 

500MB 

Unlimited 

20 

/ 

Option 

/ 

/ 

/ 

/ 

/ 


Streamline.net (www.streamline.net) 

Personal 

0844 9411000 

£41.88 

3GB 

Unlimited 

500 

/ 

Option 

✓ 

/ 

/ 

/ 

/ 


Streamline.net (www.streamline.net) 

Plus 

0844 9411000 

£71.88 

10GB 

Unlimited 

1.000 

/ 

Option 

/ 

/ 

/ 

/ 

/ 


Streamline.net (www.streamline.net) 

Multisite 

0844 9411000 

£137.88 

20GB 

Unlimited 

Unlimited 

✓ 

Option 

✓ 

✓ 

✓ 

✓ 

✓ 


Swish Hosting (www.swishhosting.co.uk) 

Email 

08445 67 69 71 

£18 


Unlimited 

Unlimited 



/ 

/ 

/ 

/ 

/ 

/ 

Swish Hosting (www.swishhosting.co.uk) 

Windows Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

✓ 

/ 

/ 

/ 

/ 

/ 

/ 

Swish Hosting (www.swishhosting.co.uk) 

Linux Hosting 

08445 67 69 71 

£66 


Unlimited 

Unlimited 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

✓ 

/ 

Swish Hosting (www.swishhosting.co.uk) 

eCommerce 

08445 67 69 71 

£90 


Unlimited 

Unlimited 

/ 

/ 

✓ 

/ 

/ 

/ 

/ 

/ 

Swish Hosting (www.swishhosting.co.uk) 

SlteBuilder 

08445 67 69 71 

£12 


Unlimited 

Unlimited 

/ 

/ 

✓ 

/ 

✓ 

✓ 

✓ 

/ 

Switch Media (www.switchmedia.com) 

Switch Standard 

0151 236 9111 

£159 

1GB 

50GB 

500 

/ 




✓ 

/ 



Switch Media (www.switchmedia.com) 

Switch Business 

0151 236 9111 

£249 

10GB 

150GB 

1500 

/ 




/ 

/ 

/ 


Switch Media (www.switchmedia.com) 

Business Pro 

0151 236 9111 

£348.96 

20GB 

300GB 

5000 

/ 




/ 

/ 

/ 


thename.co.uk (www.thename.co.uk) 

Parking 

0870 765 6364 

£52.88 

25MB 

500MB 

15 

✓ 

✓ 

✓ 

✓ 

✓ 

✓ 

✓ 


thename.co.uk (www.thename.co.uk) 

Forwarding 

0870 765 6364 

From £15 

N/A 

500MB 

N/A 



/ 

/ 

✓ 

/ 

/ 


thename.co.uk (www.thename.co.uk) 

Hosting 

0870 765 6364 

From £7.50 

N/A 

N/A 

N/A 




✓ 

✓ 

/ 

/ 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Entry 

0844 884 9100 

£25 

100MB 

1GB 

Unlimited 

/ 

✓ 

✓ 

/ 

✓ 

/ 

/ 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Home 

0844 884 9100 

£50 

500MB 

5GB 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

HomePro 

0844 884 9100 

£100 

1GB 

10GB 

Unlimited 

/ 

✓ 

✓ 

✓ 

/ 

/ 

✓ 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

Business 

0844 884 9100 

£150 

2GB 

20GB 

Unlimited 

/ 

/ 

/ 

/ 

✓ 

/ 

/ 


Tidy Web Hosting (www.tidywebhosting.co.uk) 

BusinessPro 

0844 884 9100 

£250 

5GB 

50GB 

Unlimited 

/ 

/ 

/ 

/ 

/ 

/ 

/ 


TwentyHost (www.twentyhost.co.uk) 

Basic5S 

0845 641 0776 

£24 

100MB 

1.500MB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

TwentyHost (www.twentyhost.co.uk) 

Standard5S 

0845 641 0776 

£45 

200MB 

3.000MB 

50 

/ 

✓ 

✓ 

✓ 

/ 

✓ 

/ 

✓ 

TwentyHost (www.twentyhost.co.uk) 

Business5S 

0845 641 0776 

£70 

500MB 

7.500MB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

TwentyHost (www.twentyhost.co.uk) 

AdvancedSS 

0845 6410776 

£110 

1.000MB 

15.000MB 

200 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

VARiHOST (www.varihost.net) 

WordPress Basic 

0208144 7057 

£47.88 

2GB 

10GB 

10 

/ 



/ 

/ 

✓ 

/ 

/ 

VARiHOST (www.varihost.net) 

WordPress Plus 

0208144 7057 

£71.88 

4GB 

100GB 

100 

/ 

/ 


/ 

/ 

/ 

/ 

/ 

VARiHOST (www.varihost.net) 

WordPress Extra 

0208144 7057 

£119.88 

unlimited 

Unlimited 

Unlimited 

/ 

✓ 


✓ 

/ 

✓ 

/ 

/ 

WebFusion (www.webfusion.co.uk) 

Fusion Professional 

08451301602 

£107.40 

5GB 

50GB 

1,000 

/ 


/ 

/ 

✓ 

/ 

✓ 


WebFusion (www.webfusion.co.uk) 

Fusion Business 

08451301602 

£179.40 

10GB 

150GB 

1,500 

/ 


/ 

/ 

/ 

/ 

/ 


WebFusion (www.webfusion.co.uk) 

Fusion Developer 

08451301602 

£227.40 

20GB 

300GB 

5,000 

✓ 


✓ 

/ 

/ 

/ 

/ 


WebFusion (www.webfusion.co.uk) 

Fusion Reseller 

08451301602 

£329.99 

Unlimited 

Unlimited 

Unlimited 

/ 


✓ 

✓ 

✓ 

/ 

/ 


Web Wiz (www.webwiz.co.uk) 

Windows Starter 

08443581450 

£69.95 

1GB 

25GB 

100 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 

/ 

Web Wiz (www.webwiz.co.uk) 

Windows Professional 

0844 3581450 

£149.95 

4GB 

100GB 

500 

/ 

✓ 

✓ 

/ 

/ 

/ 

/ 

✓ 

Web Wiz (www.webwiz.co.uk) 

Windows Starter Reseller 

08443581450 

£199.95 

5GB 

25GB 

500 

/ 

✓ 

/ 

/ 

/ 

✓ 

/ 

/ 

.11', 

Bronze (Linux) 

08450589000 

£47.88 

2GB 

20GB 

10 

/ 

/ 

/ 

✓ 

/ 

/ 

/ 

X 


Silver (Linux) 

08450589000 

£95.88 

5GB 

50GB 

25 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 

r/J : 

Gold (Linux) 

08450589000 

£143.88 

10GB 

100GB 

50 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Platinum (Linux) 

08450589000 

£239.88 

50GB 

250GB 

100 

/ 

/ 

/ 

/ 

/ 

/ 

✓ 

X 


Reseller (Linux) 

08450589000 

£479.88 

150GB 

500GB 

250 

/ 

/ 

/ 

/ 

/ 

/ 

/ 

X 


Designer (Windows) 

08450589000 

£59.88 

2GB 

20GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 

Zen Internet www.zen.co.uk 

Developer (Windows) 

08450589000 

£179.88 

10GB 

100GB 


/ 

X 

X 

/ 

/ 

/ 

/ 

X 


Golden rules to top hosting We identify and explain the key criteria for success... 


The best 

resources for you 

Selecting your ideal package is largely 
determined by the kinds of resources and quantity 
of features you require from your hosting solution. 
Key criteria like web space and monthly bandwidth 
are important for those services likely to be 
subjected to heavy amounts of traffic, which is 
why package solutions for enterprise applications 
are typically much more expensive. The general 
rule of thumb is not to buy more than you need or 
underestimate potential requirements... 


Competitive 
and reliable 

The hosting market is big business and 
hosting providers do try to drive prices down 
in a bid to entice your custom. Use our chart to 
compare costs, but be sure to visit the vendor 
websites to keep track of the latest deals, as 
they change. Remember that low price should 
not always be a deciding factor and that paying 
a premium for a more reliable, trusted and 
experienced vendor can offer you much better 
value for money in the long term. 


Putting you 
in control 

Modern hosting is all about giving 
customers the power to set up. monitor and 
maintain their web space with minimal fuss. Most 
commercial vendors offer access to award-winning 
and intuitive control panels that enable you to log 
in remotely and intuitively tweak your account, 
without the need to relay complicated instructions 
down the phone. Be sure to find out from your 
potential host as much as you can about the 
control panel and request a demo. 


Fantastic 
customer support 

If all else fails and you need some 
extra help to get your hosting back online, then 
a commitment to future customer support is key. 
Many vendors offer a service-level agreement 
which outlines what you can expect here, however 
most will be more explicit about whether phone 
support is included or email contact is preferred. 
Think about what you need for peace of mind and 
factor good, comprehensive technical support 
against the price. 
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■ ttieb NEXTISSUE 



OWN WORDPRESS THEME 


FRAMEWORKS • TOOLS • TEMPLATES 
TAGS • HEADERS • FOOTERS • SIDEBARS 



TUNEUPYOUR 
WEBSITE 

Get to grips with debugging, plug 
memory leaks and work around 
execution limits 


FROM RELIC TO 
RESPONSIVE 

Convert your current website into a 
responsive masterpiece with CSS 



CREATEA 
CONTENT 
SLIDER 

Use CSS and jQuery to make this 
classic piece of page furniture 


PRO FILE: BBH 
LONDON 

Behind the scenes with Bartle, Bogle & 
Hegarty, the legendary London agency 
that’s home to Vorsprung durch 
Technik and the Levi look 


Visit the WEB DESIGNER online shop at 


ALL IN YOUR LATEST 


imagineshop.co.uk |webdesigner 


for back issues, books and merchandise 


Issue 203 on sale 

Thursday 15 November 2012 
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Classified Advertising 


01202 586419 


Reliability 


Flexibility 
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support 
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hosted 

TECHNOLOGY 
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cx> 

Hosted Technology, 




If you’re driven mad looking for hosted technology which 
gives you complete peace of mind, then look no further. 

Fasthosts has been taking the headache out of delivering 
industry-leading technologies, for thousands of customers, 
just like you for over 13 years. 

With wholly-owned and managed secure UK data centres 
and our team of experts, Fasthosts are always here, 

_ . , , supporting you every step of the way. 

Technology you can rely on 

today, tomorrow and the future For help and advice call free on 0800 6520 444 


WEB HOSTING ■ DOMAINS ■ EMAIL • DEDICATED SERVERS ■ VIRTUAL SERVERS ■ RESELLER HOSTING 


fasthosts 


fasthosts.co.uk 


Making business work better online OC call 0800 6520 444 H f in b 







met designer 


Classified Advertising 



lfl©lfwebhosting... 

designers prefer it 


Visit us online •••• 

www.TidyWebHosting.co.uk 


Tidy Web Hosting is a trading name of Poldings Limited 

Registered in England & Wales (5935455). All prices subject to VAT. Call: 0844 884 9100 


WEB HOSTING 


mmutsiam 


Call us direct... 

0844 884 9100 


1 


1. Personal Support 

2. Fully Managed Plans 

3. Superior Servers 

4. Professional Features 

5. Unlimited Addons 


FROM 


. - P Vear 

equivalent to 

Per 

Month 



Need More Space? 

Expand your desktop with Matrox DualHead2Go Digital ME 

Tired of toggling through applications, switching back and forth between windows, 
being confined to a single screen? Connect two external displays to your Mac 
notebook with Matrox DualHead2Go Digital ME and enjoy the feeling of more screen 
space. This little silver box transforms your Mac into a productivity powerhouse. Use 
the extra screen space to fit more data on your desktop and multi-task easier. 


^SSSS''""’ 

V 



See more. Do more—with Matrox DualHead2Go Digital ME. 

For more information visit www.matrox.com/graphics/digital_me/icreate/ 
or call 01895 827260. 


matron 

Graphics for Professionals 








Classified Advertising 


01202 586419 




<r'COMPILA 

cheaper, greener, faster, web hosting 
WWW.COMPILA.COM 
0871 226 1144 




cheaper than our 
leading competitors 

without any loss of service or quality....Guaranteed! 



GO» 

COMPILA 


no risk, money back guarantee! 


3 Capture+ 

-I (mm 


from PostcodeAnywhere 

The Next Generation of International Address Finder 
optimise your checkout process with Capture+ 


The de-facto choice for address 
look-up, second to none 


© Graze.com 


240+ countries supported 
Auto-completing addresses 
Find addresses on-the-move 


0800 047 0495 

www.postcodeanywhere.com/capture 


Read anything 
good lately? 

Shop for quality magazines, 
books and DVDs from 
Imagine Publishing 



imagineshop. 


MAGAZINES BOOKS DVDS DOWNLOADS GIFTS 


lco.uk His] 


To Advertise In 

oh 



Contact Nick On 
01202 586419 

nick.marrow@imagine-publishing.co.uk 



trade secret 

noun {c} -tred si kriht - A secret formula, method, or device that gives one an advantage over competitors. 

Low cost address lookup for your website 

■4 Buy online from £15 4 vat 80% reduction of keystrokes entering addresses 

Eliminate spelling mistakes Create a professional image for your clients 

Reduced abandoned carts Simple integration with SDK 8i working examples 

For more details visit postcode-software.net or call 0845 83 82 666 
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•] iPad iPhone Android phone Android tablet Apple Mac Windows PC 


360 Magazine 


3D Artist 


































No Disc. No Problem 

Many of the files you’re looking for can be 
found on the magazine’s website 

Imagine digital editions ^ get the most out of y0 ur digital 

° ° editions, be sure to enjoy all of our 

i are a new and exciting fantastic features, including: 

\ way to experience our ‘ Zoomable text and P ictures 
) world-leading magazines ! SSiSS 

and bookazines. • Take your collection with you 




ung ImagineBookShop ImagineSubs ImagmeShop 


• Read offline 


Q0Q 


To buy more Imagine digital editions and for the 
latest issues and best offers, please go to 



Advanced Photoshop Android Magazine 


www.GreatDigitalMags.com 
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National Geographic 


Spacing 

While padding and 
margins are now used to 
create visual spacing 
between elements, 
empty tables were often 
employed to create the 
nedessary placing of 
page elements. 


NATIONALGEOGRAPH 1C CON — 

Tho Web Site of the National Geographic Society U&i* Qw Maoulnaa Qetfr»« t-NmUQn 




Tables 

The vast majority of the 
National Geographic 
website was still using 
tables for the site layout. 
However, there were 
early signs of the 
introduction of div tags. 


Background 

image 

The footer uses the 
ever-popular background 
image technique to create 
a canvas for the element. 
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Shop by Catagory 


• ftari/pM o' 
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Bv INVOLVED',* NATIONAL GEOGRAPHIC IN ACTION 

Attend Event* a EcMbtt* Mmi Our Eiporar* Sn W»u* Me » 


http://www. xom 




Gh* »tha haboqsLGtfignphic Society I Supoori metontoo*. Mto u 



Single image 

A single image, and multicoloured 
text link provided the gateway to 
the main website, which was 
simply a small image and links to 
the main components of the site. 


Welcome! Click the paw port to begin your digital trek. 

Don't tee the passport? 

Then you'll need to gc4i up with Netscape or 


KanOKAL OtOOaAJW MTKHAL OKXHUfinr SOCWTf. ari W 


National Geographic www.nationalgeographic.com 

National Geographic is an organisation with a long and illustrious 
heritage; a set of ingredients that make its website what it is today 


National Geographic is synonymous with 
nature, history and science. It has been around 
since 1888 and is one of the largest nonprofit 
scientific and educational institutions in the world. 
It has been in print longer than the web has been 
in existence, and has a vast wealth of experience 
and content to draw from. The National 


Geographic website first made an appearance 
back in 1996, and was just a gateway image to a 
simple site. However, it wasn’t until around 1999 
that the site started to adopt the company 
branding. The distinctive yellow border became a 
focal point that helped shape the current web 
presence and its predecessors. 


If The National Geographic website first 
made an appearance back in 1996, and 
was just a gateway image 
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( A123-REG VPS 

from just £14.99 4 
PER MONTH? 

THAT'S JUST THE TICKET 

. HOORAH! 




WITH A VPS FROM 123-REG YOU CAN SCALE UP AND DOWN AS NEEDED. 

SO WHEN YOUR SITES NEED EXTRA OOMPH IT S JUST A FEW CLICKS AWAY. SPLENDID. 


• M2 CORE PROCESSORS (vCPU ) 

• 16B-12GB MEMORY (RAM) 

• 50GB-300GB STORAGE (HDD) 


• SCALABLE RESOURCES 

• FREE PLESK11 CONTROL PANEL 

• UK DATA CENTRE AND SUPPORT 


FIND OUT MORE ABOUT OUR VPS AT WWW.I23-REG.C0.UK/VPS 

PRICE EXCLUDES VAT. TERMS & CONDITIONS APPLY. 


1 2 3 Teg 


.co.uk 
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YOUR ONE-STOP IMAGE SOLUTION 

YOU CAN BUY OUR PREMIUM PHOTOS 
FROM 50C WITH OUR CREDIT SYSTEM, 

OR FOR AS LOW AS IOC WITH ONE OF 
OUR OUTSTANDING SUBSCRIPTION PLANS! 



Get 20% OFF on your next purchase 
with promotion code: 


CS847924 



Find over 9 million royalty-free stock photos and vector images 

at www.depositphotos.com 


Depositphotos Inc., 110 E. Broward Blvd., Suite 1700, Fort Lauderdale, FL 33301, USA 11-954-990-0075 






















